Clearfix组不在UL中工作

Question

我正在尝试水平对齐我的UL项目，但它不起作用。我已经在另一个div中使用了"group"clear修复代码，它在那里工作得很好。请帮帮我。

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;
}

Answer 1

您只需要将浮动元素放在一行上，例如彼此内联。

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

您所要做的就是将background属性添加到元素中，以查看此浮动如何在视觉上影响菜单。

例如

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

您的类group按预期工作，它正确地清除了浮点值。然而，如果您不使用float而是使用display: inline-block，则您甚至不需要group类——它还有其他问题，如在元素之间造成空白，但可以通过多种其他方式解决，而不是浮点。

其中之一是将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上搜索，并立即找到直接答案。

group是一个非常全局的未分类名称，因此如果需要可维护性，您需要小心使用它的目的。

Answer 2

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

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

我所做的改变是小组风格：

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