Question

我试图将我的横向＆lt; ul＆gt;居中在＆lt; div＆gt;内（我的例子中的黄色条纹）。标记在下面。我知道如果＆lt; li＆gt;然后我可以通过在＆lt; ul＆gt;上设置左右边距来实现它了。到“自动”，但我似乎没有找到摆脱“浮动”的方法，因为我需要我的＆lt; li＆gt;是块元素，以便我可以调整它们的大小。请帮忙！谢谢康斯坦丁


<html>
<head>
    <title></title>
    <style type="text/css">
        .container
        {
            background-color: yellow;
        }
        .container li
        {
            border: solid 1px grey;
            display: block;
            float: left;
            height: 100px;
            line-height: 100px;
            list-style-type: none;
            margin: 5px;
            text-align: center;
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li><a href="#">x</a></li>
            <li><div>y</div></li>
        </ul>
        <div style="clear: both;">
        </div>
    </div>
</body>
</html>

<小时/> 代表OP发布演示：jsbin。

Answer 1

是块级元素，因此占用容器的整个宽度... text-align用于对齐文本。你可以这样做：

.container ul{
    width:400px;
    margin:0px auto
}

Answer 2

试试这个，适用于firefox和chrome

<html>
<head>
<title></title>
<style type="text/css">
    .container
    {
        background-color: yellow;
        text-align: center;
    }
    .container ul
    {
        display: inline-table;
        text-align: center;
    }
    .container li
    {
        border: solid 1px grey;
        display: block;
        float: left;
        height: 100px;
        line-height: 100px;
        list-style-type: none;
        margin: 5px;
        text-align: center;
        width: 100px;
    }
</style>
</head>
<body>
<div class="container">
    <ul>
        <li><a href="#">x</a></li>
        <li>
            <div>
                y</div>
        </li>
    </ul>
    <div style="clear: both;">
    </div>
</div>
</body>
</html>

Answer 3

不确定如何回答你的问题，因为我甚至看不到FF 3.6.8中的黄色条纹

但看看这个http://www.cssplay.co.uk/boxes/ - 有很多选项，它可能会帮助你。

如何在div中对齐水平列表？

3 个答案: