Question

基本上，我有一个ul有3 li个，全部浮动到左边，第一个和最后一个用width: 20%，第二个li用{ {1}}。

我在第二个width: 60%元素中有一个锚标记，包含一些文本和li。

问题是文本没有居中，因为锚标记没有填充li标签。

导致这种情况的原因是什么？

编辑：

我在锚标记中有display: block; width: 100%; text-align: center;。愚蠢的错误，谢谢大家。

Answer 1

在this jsfiddle中尝试了你的案例，让它按你的意图运作。

我从锚标记中删除了：

width: 100%;

检查并比较，如果你没有找到任何搞砸的东西，可能代码中还有其它内容阻止它正常工作。

Answer 2

这是一个简单的示例，使用您提供的少量代码，但不会出现问题。

HTML：

<ul>
    <li></li>
    <li class="link"><a href="">Test</a></li>
    <li></li>
</ul>

CSS：

html, body {
    margin: 0;
    padding: 0;
}

li {
    display: block;
    float: left;
    width: 20%;
    height: 2em;
    list-style-type: none;
    background: salmon;
}

.link {
    width: 80%;
    background: lightblue;
}

.link a {
    display: block;
    width: 100%; 
    text-align: center;
    background: rgba(0, 0, 0, .25);
}

您的代码中有些内容没有告诉我们这是导致您的问题。研究这个简单的例子，找出它是什么。

JSFiddle

Answer 3

使用display: block时从<a>删除width: 100%。

什么可能导致锚标记不填充li标签？

3 个答案: