我试图水平对齐我的 UL 元素,但它不起作用。我已经在另一个 div 中使用了“组”清除修复代码,它在那里工作得很好。 请帮助我。
html代码。
<div class="contain">
<header>
<h1>Hello !</h1>
<p>Zeeshan here</p>
<nav class="site-nav">
<ul class="group">
<li><a href="#">Home</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
. CSS代码
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
content: "";
display: table;
clear: both;
}
.group {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.包含
.contain
{
width: 800px;
margin-right: auto;
margin-left: auto;
}
.站点导航
.site-nav li
{
list-style: none;
float: lef;
}
最佳答案
所有你想要的是你的 float 元素在一行上,例如相互内联。
事实上,有多种方法。你的有效,但你有一个拼写错误导致你的 float
不工作。
要查看此 float 如何影响菜单视觉,您只需添加一个 background
即可。元素的属性。
例如
.site-nav ul {
background: #09c;
}
.site-nav ul li {
float: left;
}
你的类(class) group
按预期工作,它会正确清除 float 。
但是你甚至不需要 group
如果你不使用类 float
而是使用 display: inline-block
- 它还有其他问题,例如在您的元素之间造成空白,但可以通过多种其他方式而不是 float 来解决。
其中之一是设置 font-size
ul
的属性(property)至 0px
并在嵌套的 li
上重置它成为[your-size]px
.
您的 HTML 会更简单,因为您不需要 group
在你的课上 ul
自 inline-block
元素基本上是inline
带有 block
的元素属性(如 width
, height
)你也可以使用 text-*
对齐元素的属性,它们实际上变成了文本,因此您可以像处理文本一样操作它们。
使用 inline-block
的示例
.site-nav ul {
background: #09c;
font-size: 0;
/*text-align: center;*/ /*uncomment if you want to see alignment of items*/
}
.site-nav ul li {
display: inline-block;
font-size: 16px; /*example value*/
}
我还可以指出,使用 group
这个词吗?作为 clearfix
的名称不清楚?最好直接命名为clearfix
因为这正是它的作用,另一个程序员会理解这一点,如果不理解,他会谷歌clearfix
并立即找到直接答案。
group
是一个非常全局化的未分类名称,因此如果需要可维护性,您需要谨慎使用它。
关于html - Clearfix 小组不在 UL 中工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34017354/