0

基本上,我有一个ul带有 3li的,都向左浮动,第一个和最后一个带有width: 20%,第二个li带有width: 60%

我在第二个li元素中有一个锚标记,带有一些文本,并且display: block; width: 100%; text-align: center;.

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

是什么原因造成的?

编辑:

我有float: left;锚标签。愚蠢的错误,谢谢大家。

4

3 回答 3

3

在这个 jsfiddle中尝试了你的案例,让它按你的意图工作。

我从锚标签中删除:

width: 100%;

检查并比较,如果你没有发现任何你搞砸的东西,也许你的代码中有其他东西阻止它正常工作。

于 2013-05-14T17:31:51.300 回答
1

这是一个使用您提供的少量代码的简单示例,这些代码不会显示您的问题。

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

于 2013-05-14T17:30:33.767 回答
0

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

于 2013-05-14T17:28:36.010 回答