Question

我有一组包含li的文字，我想在CSS ul内水平显示和居中。我似乎无法让这个工作，另一个答案建议使用display:inline，但这没有做任何事。

以下是代码：

header li {
    margin-left:20px;
    margin-right:0px;
    border-left:1px #FFF solid ;
    float:left;
    color:#FFF;
    padding:2px 2px 2px 2px;
    margin-bottom:10px;
    text-align:center;
}

header ul {
    width:321px;
    margin-left:auto;
    margin-right:auto;
    background:url(repeatback.png);
    height:30px;
}

请求html：

<ul>
    <li>About</li>
    <li>Portfolio</li>
    <li>Resume</li>
    <li>Links</li>
    <li>Twitzar</li>
</ul>

Answer 1

我假设您希望将文本置于列表项的中心位置？您需要在元素上指定text-align: center才能正常工作。

有关示例，请参阅此小提琴：http://jsfiddle.net/sUxnK/1

注意，css略微调整以显示居中文本。

<div id="header">
    <ul>
        <li>About</li>
        <li>Portfolio</li>
        <li>Resume</li>
        <li>Links</li>
        <li>Twitzar</li>
    </ul>
</div>

#header ul {
    width:700px;
    margin: 0px auto;
    height: 30px;
}

#header li{
    margin: 0px 0px 10px 20px;
    border: 1px dotted #ccc;
    float:left;
    padding:2px;
    width: 100px;
    text-align:center;
}

Answer 2

See this jsFiddle。在我的解决方案中，每个li不需要宽度。相反，我在容器text-align: center上使用了ul，每个li display: inline，并更改了边距和填充，以便正确显示边框。

CSS文本对齐不与LI一起使用

2 个答案: