基本上,我有一个ul
带有 3li
的,都向左浮动,第一个和最后一个带有width: 20%
,第二个li
带有width: 60%
。
我在第二个li
元素中有一个锚标记,带有一些文本,并且display: block; width: 100%; text-align: center;
.
问题是文本没有居中,因为锚标签没有填充 li 标签。
是什么原因造成的?
编辑:
我有float: left;
锚标签。愚蠢的错误,谢谢大家。
基本上,我有一个ul
带有 3li
的,都向左浮动,第一个和最后一个带有width: 20%
,第二个li
带有width: 60%
。
我在第二个li
元素中有一个锚标记,带有一些文本,并且display: block; width: 100%; text-align: center;
.
问题是文本没有居中,因为锚标签没有填充 li 标签。
是什么原因造成的?
编辑:
我有float: left;
锚标签。愚蠢的错误,谢谢大家。
这是一个使用您提供的少量代码的简单示例,这些代码不会显示您的问题。
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);
}
您的代码中有一些内容您没有告诉我们导致您的问题。研究这个简单的例子来找出它是什么。
使用时display: block
从 中删除。<a>
width: 100%