Question

我正在尝试水平对齐我的UL项目，但它不起作用。我已经使用了＆＃34; group＆＃34;在另一个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

.contain
{

    width: 800px;
    margin-right: auto;
    margin-left: auto;

}

.site-NAV

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

Answer 1

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

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

要了解此浮动如何影响菜单直观，您需要做的就是向元素添加background属性。

e.g。

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

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

您的班级group按预期工作，它会正确清除浮动。但是，如果您不使用group但是使用float，则您甚至不需要display: inline-block课程 - 它还有其他问题，例如在您的元素之间造成空白但是可以用多个其他方式修复浮点数。

其中一项是将font-size的{{1}}属性设置为ul，并将其嵌套0px重置为li。

您的HTML会更简单，因为您不需要[your-size]px上的group课程，因为ul元素基本上是inline-block元素{{1} }}}属性（例如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，因为它的完全它的功能和另一个程序员会理解这一点，如果没有，他将会谷歌{{1}无论如何都能立即找到答案。

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

Answer 2

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

我复制了你的html和css并将列表项对齐到中心，希望它有用。

我所做的改变是团体风格：

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

Clearfix组不在UL

2 个答案: