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

ako*_*nsu 2 css

我试图将水平<ul>放在<div>(我的例子中的黄色条纹)中.标记在下面.我知道如果<li>没有浮动,那么我可以通过将<ul>上的左右边距设置为"自动"来实现,但我似乎找不到摆脱"浮动"的方法因为我需要我<li>是块元素,以便我可以调整它们的大小.请帮忙!谢谢康斯坦丁


<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>
Run Code Online (Sandbox Code Playgroud)


代表OP代表发布的演示:jsbin.

Zaa*_*hid 5

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

.container ul{
    width:400px;
    margin:0px auto
}
Run Code Online (Sandbox Code Playgroud)