Question

我正在尝试使水平导航菜单占用父元素的所有可用宽度。

我尝试过使用display：table和display：table-cell但是没有用。

其他方法，例如使用overflow和width：auto也不起作用。

该列表由Joomla通过菜单模块创建。

HTML

<div id="DivN">
  <jdoc:include type="modules" name="position-1" />
</div>

html（在浏览器上查看时）

<div id="DivN">
  <ul class="nav menu nav-pills">

    <li class="item-101 current active">
      <a href="/site/">Home</a>
    </li>

    <li class="item-113">
      <a href="/site/index.php?Itemid=113">School Info</a>
    </li>

    <li class="item-114">
      <a href="/site/index.php?Itemid=114">Achievements</a>
    </li>

    <li class="item-115">
      <a href="/site/index.php?Itemid=115">News &amp; Events</a>
    </li>

    <li class="item-116">
      <a href="/site/index.php?Itemid=116">Parents &amp; Carers</a>
    </li>

    <li class="item-117">
      <a href="/site/index.php?Itemid=117">Community</a>
    </li>

    <li class="item-118">
      <a href="/site/index.php?Itemid=118">Contact Us</a>
    </li>

  </ul>
</div>

CSS

#DivN{
    width:100%;
    height:42px;
    border-top:1px solid black;
    border-bottom:1px solid black;
    text-decoration:none;
    background-color:black;
    text-align:center;
    font-size:13px;
    font-weight:700;
}

#DivN ul{
    list-style:none;
    width:100%;
}

#DivN ul li{
    display:inline-block;
    /*float:left;*/
    line-height:22px;
    height:32px;
    list-style-type:none;
    margin:4px;
    overflow:hidden;
    width:auto;
}

过去几天我已经尝试了很多方法...... 然而，互联网上找不到任何东西。

我不知道Joomla所添加的类是什么，也不知道它们在哪里。

导航栏如下所示：https://www.dropbox.com/s/5sw94euzbsgwvrc/Capture.PNG 当鼠标悬停在按钮上时：https://www.dropbox.com/s/lv73war905ii0rh/2.PNG

如何才能获得它，以便列表在占用相同大小时占用所有可用空间？

Answer 1

我认为你应该尝试使用

display: table

再次（针对nav元素）和display: table-row针对ul，display: table-cell针对li。

如果您有任何问题，请写信，但此方法应该有效。不要害怕display: table，它不是一个旧的表元素，而是使用验证和语义HTML进行良好布局的一个很好的技巧。希望它有所帮助

<强>更新相同的工作解决方案：CSS dynamic horizontal navigation menu to fill up specific width (table behavior)

Answer 2

如果项目中的相等宽度对您很重要，您可以将项目浮动到左侧并为它们设置相等的宽度（当您知道有多少项目时，这会有效。或者，您可以使用js来确定宽度，如果您有可变数量的菜单项）：

#DivN{
    width:100%;
    height:42px;
    border-top:1px solid black;
    border-bottom:1px solid black;
    text-decoration:none;
    background-color:black;
    text-align:center;
    font-size:13px;
    font-weight:700;
}

#DivN ul{
    list-style:none;
    width:100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

#DivN ul li{
    float:left;
    line-height:37px;
    height:100%;
    list-style-type:none;
    margin:0;
    overflow:hidden;
    width: 14.28571428571429%;
    cursor: pointer;
}
#DivN ul li:hover{
    background-color: gray;
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
#DivN ul:before,
#DivN ul:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

#DivN ul:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
#DivN ul {
    *zoom: 1;
}

这是一个小提琴：http://jsfiddle.net/kZb9C/

已更新以使cf（clearfix）定位您的元素：http://jsfiddle.net/4LUQe/16/

如果您想使用display: table方法，请记住在display: table-cell元素上使用<li>。另外，如果要垂直居中，请使用vertical-align: middle。（请注意table和table-cell CSS属性在IE7及以下版本中无效。）

这是第二种方法（table）的小提琴：http://jsfiddle.net/kZb9C/1/

Answer 3

<style>
   div { border:1px solid red; width:400px; height:400px; }
   ul { width:100%; height:50px; list-style: none; margin:0; padding:0; text-align: center; }
   li { background-color:green; color:White; width:1%; position:relative; display:table-cell; border:solid 1px white; }
</style>

<div>
   <ul>
      <li>CELL 1</li>
      <li>CELL 2</li>
      <li>CELL 3</li>
      <li>CELL 4</li>
   </ul>
</div>

CSS：使列表中的所有<li>宽度相同并占用100％的可用空间</li>

3 个答案: