Clearfix 组在 UL 中不起作用

Question

我正在尝试水平对齐我的 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

.site-nav li
{
    list-style: none;
    float: lef;
}

Answer 1

你想要的只是你的浮动元素在一行上，例如相互内联。

事实上，有多种方法。你的工作，但你有一个错字导致你的float 不工作。

您只需向元素添加background 属性，即可了解此浮动对菜单的影响视觉上。

例如

.site-nav ul {
    background: #09c;
}

.site-nav ul li {
    float: left;
}

您的班级group 正在按预期工作，它正确清除了浮动。 但是，如果您不使用 float 而是使用 display: inline-block，您甚至不需要 group 类 - 它还有其他问题，例如导致元素之间出现空白，但可以在多个 other 方式比浮动。

其中之一是将ul 的font-size 属性设置为0px，并将嵌套li 上的属性重置为[your-size]px。

您的 HTML 会更简单，因为您不需要 ul 上的 group 类，并且因为 inline-block 元素基本上是具有 block 属性的 inline 元素（如 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 并立即找到直接答案。 p>

group 是一个非常全球化的未分类名称，因此如果需要可维护性，您需要谨慎使用它。

Answer 2

https://jsfiddle.net/wr5uhxne/1/

我复制了您的 html 和 css 并将列表项对齐到中心，希望对您有所帮助。

我所做的更改是在组样式中：

.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
    text-align:center;
}