Question

在第一张图片是从IE中拍摄的，它的每个内容都有全宽，但如果您在第二张图片中看到最后一个菜单内容，则不会占据全宽。如何在两个浏览器中解决这个问题

HTML：

<div class="menu-section clearfix">
    <div  class="menu-element clearfix">
        <ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">about us</a></li>
            <li><a href="#">administration</a></li>
            <li><a href="#">academics</a></li>
            <li><a href="#">research</a></li>
            <li><a href="#">activities</a></li>
            <li><a href="#">examination</a></li>
            <li><a href="#">facilites</a></li>
            <li><a href="#">contact us</a></li>
        </ul>
    </div>
</div>

CSS：

  .menu-section {
      background-color:#900000;
      height: 56px;
  }
  .menu-element {
      background-color: #400;
      height: 50px;
  }
  .menu-element li {
      float:left;
  }
  .menu-element li:hover {
      background-color:#900000;
  }
  .menu-element li.active {
      background-color:#900000;
  }
  .menu-element li a {
      color:#fff;
      text-transform:uppercase;
      display: block;
      padding: 18px 21px;
      text-decoration:none;
      font-weight: bold;
  }

This image was in IE, taking full width This image was in firefox, its not taking full width

Answer 1

您还需要为ul添加样式：

.menu-element > ul {
    list-style: none;
    margin: 0; padding: 0;
}

维护浏览器之间的一致性有点困难，但您可以通过两种方法确保相同的呈现。

在doctype上指定有效的html以确保标准模式和
在样式表中指定box-sizing，通常为border-box。

-

* {
    box-sizing: border-box;
}

如果你想证明宽度上的菜单选项是合理的，那么你将不得不进行一些调整和黑客攻击。

在包裹div上应用固定宽度，text-align:justify上的ul和display:inline-block上的li是必需的。

注1： display: inline-block是必需的，但它会生成html空格。为了摆脱那些空格，可以在列表项的标记中使用html注释。

注意2：黑客中的:after伪元素似乎就是这样做的。但是，这将在ul下方创建一个意外的空间。这个空间似乎在那里，因为元素被刷过。如果不合理，则不会出现此空格。

.menu-element {
    width: 100%; /* fixed width required on wrapping container */
}

.menu-element > ul {
    list-style-type: none; /* getting rid of bullets */
    margin: 0px; padding: 0px; /* getting rid of default indents */
    text-align: justify; /* important to justify contents */
}

.menu-element li {
    display: inline-block; /* required. float won't work. */
    text-align: left; /* to properly align list items */
    white-space: no-wrap; /* to prevent wrapping of list items if required */  
}

.menu-element > ul:after { 
    /* this is the hack without which the list items won't get justified */
    content:''; display: inline-block; width: 100%; height: 0; 
}

演示：http://jsfiddle.net/abhitalks/mv7qnfLe/4/

全屏演示：http://jsfiddle.net/abhitalks/mv7qnfLe/4/embedded/result/

Answer 2

试试这个： -

.menu-element ul {
    padding: 0;
}

Answer 3

试一下

为ul元素添加一些宽度，并在css中添加此样式规则：

.menu-element ul {
        clear: both;
        list-style:none;
        margin: 0 auto;
        text-align: center;
        width: 92%;
}

我希望它适合你。

我在导航栏css中有对齐问题

3 个答案: