使所有 <li> 与最宽的宽度相同答案

【问题标题】：Make all <li> same width as the widest使所有 <li> 与最宽的宽度相同
【发布时间】：2021-09-19 23:44:11
【问题描述】：

我有这个菜单，它是内联设置并有下拉菜单。
内部ul 有背景。
每个下拉列表li 都有一个:hover，用于更改li 的背景：

<div id="navMain">
    <ul>
        <li><a href="#nogo">Forside</a>
            <ul>
                <li><a href="#nogo">1111111111111</a></li>
                <li><a href="#nogo">Link 1-2</a></li>
                <!-- etc. -->
            </ul>
        </li>
        <li><a href="#nogo">Om Os</a>
            <ul>
                <li><a href="#nogo">Link 2-1</a></li>
                <li><a href="#nogo">Link 2-2</a></li>
                <!-- etc. -->
            </ul>
        </li>
        <li><a href="#nogo">Link 3</a>
            <ul>
                <li><a href="#nogo">Link 3-1</a></li>
                <li><a href="#nogo">Link 3-2</a></li>
                <!-- etc. -->
            </ul>
        </li>
    </ul>
</div>

问题是，当一个子菜单li 比其他子菜单长时，它只会扩展自己，而不是另一个li 当然。
这导致:hover 效果具有不同的长度。

那么我如何使每个内部ul 中的所有li 与最宽的尺寸相同？

Here you can find the CSS 如果需要。

【问题讨论】：

如果您只想支持低至 IE8，您应该查看 display:table-

标签： html css width html-lists

【解决方案1】：

这里。请注意，我在您的菜单 li 中添加了一个类，并在您的 css 中添加了正文背景，因为我没有注意到您的菜单。最后，将 li 元素设为 100% 宽度来完成技巧

body {
  background-color: green;
}

.menu li {
  width: 100%
}

#navMain {}

#navMain ul {
  padding: 0;
  margin: 0;
  z-index: 2;
}

#navMain ul li {
  margin-right: 5px;
  text-align: center;
}

#navMain li a {
  display: block;
  text-decoration: none;
  color: white;
  padding-left: 10px;
  padding-right: 10px;
}

#navMain li a:hover {
  background-color: black;
}

#navMain ul li:last-child {
  margin-right: 0px;
}

#navMain li {
  position: relative;
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 17px;
  font-weight: bold;
  color: #fff;
}

#navMain ul ul {
  position: absolute;
  top: 20px;
  visibility: hidden;
  background-image: url(img/alphaBg.png);
}

#navMain ul li ul li {
  font-size: 12px;
  margin-right: 0px;
  text-align: left;
}

#navMain ul li ul li:first-child {
  padding-top: 5px;
}

#navMain ul li:hover ul {
  visibility: visible;
}

<html>

<head>
</head>

<body>
  <div id="navMain">
    <ul>
      <li><a href="#nogo">Forside</a>
        <ul class="menu">
          <li><a href="#nogo">1111111111111</a></li>
          <li><a href="#nogo">Link 1-2</a></li>
          <li><a href="#nogo">Link 1-3</a></li>
          <li><a href="#nogo">Link 1-3</a></li>
          <li><a href="#nogo">Link 1-3</a></li>
          <li><a href="#nogo">Link 1-3</a></li>
        </ul>
      </li>
      <li><a href="#nogo">Om Os</a>
        <ul class="menu">
          <li><a href="#nogo">Link 2-1</a></li>
          <li><a href="#nogo">Link 2-2</a></li>
          <li><a href="#nogo">Link 2-3</a></li>
        </ul>
      </li>
      <li><a href="#nogo">Link 3</a>
        <ul class="menu">
          <li><a href="#nogo">Link 3-1</a></li>
          <li><a href="#nogo">Link 3-2</a></li>
          <li><a href="#nogo">Link 3-3</a></li>
        </ul>
      </li>
    </ul>
  </div>
</body>

</html>

【讨论】：

【解决方案2】：

li {display:block} 将使列表项与该父容器中最宽的项一样宽

【讨论】：

似乎对我不起作用？这是一个例子forevertan.dk/_temp/eventfest/3/test2.htm

【解决方案3】：

body {
  background: #ededed;
  margin: 0 auto;
}

.wrapper {
  width: 720px;
  border: 1px solid red;
  padding: 5px;
}

.menu {
  padding: 0;
  margin: 0;
  width: 100%;
  border-bottom: 0;
}

.menu li {
  display: table-cell;
  width: 1%;
  float: none;
  border: 1px solid green;
  margin: 2px;
  padding: 10px;
  text-align: center;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <div class="wrapper">
      <ul class="menu">
        <li><a href="#">menu 1</a></li>
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 3</a></li>
        <li><a href="#">menu 4</a></li>
        <li><a href="#">menu 5</a></li>
      </ul>
    </div>
  </body>
</html>

【讨论】：