包装文本时的水平列表项宽度

Question

我有一个水平菜单：https://jsfiddle.net/4dzrto3v/2/

我想要实现的是减少项目宽度，当我包装文本时。如果你看第二个元素，右边有一个空格我想减少到最小。

#nav {
  width: 100%;
  height: 4em;	
  background: #F0C000;
  padding: 0;
  list-style: none;
}

#nav li {
  float: left;
  position: relative;
  display: block;
  font-size: 1em;
  text-transform: uppercase;
  height: 4em;
  padding-right: 1em;
  max-width: 8em;
  border-right: 1px solid #fff
}

#nav a:link, #nav a:active, #nav a:visited , #nav a:hover { 
  color: #444; 
  text-decoration: none;
}

#nav li:hover {
  background-color: #fff;
}

<ul id="nav">
  <li>First</li>
  <li>Second element</li>
  <li>Third element</li>
  <li>Fourth element with long text</li>
  <li>Fifth</li>
</ul>

如果删除max-width属性，则没有单词分隔符，文本是单行。

以下是我想要的菜单说明（注意第二个元素宽度）。

Answer 1

您可以尝试使用flex：

而不是在 li 元素上使用float属性。

#nav{
    width: 100%;
    height: 4em;    
    background: #F0C000;
    padding: 0;
    list-style: none;
    display:flex;
}

#nav li{
    position: relative;
    font-size: 1em;
    text-transform: uppercase;
    height: 4em;
    padding-right: 1em;
    border-right: 1px solid #fff
}

它会根据文本长度自动调整列表元素的大小。