列表的宽度应该更大

Question

我不明白为什么<li> s中有一个很大的空间，为什么边框不会扭曲文本。 fiddle

我希望每个<li>的宽度都像最大的<li>

感谢您的帮助：D

Answer 1

从#settingNev a中删除100％的宽度会将大小减小到span元素中的字符串长度。或者，如果您需要它们，则可以设置特定的宽度。

http://jsfiddle.net/rtT8L/

#settingNev a {
  float: left;
  margin: 0 3px 0 3px;
  text-decoration: none;
  border-radius: 6px 6px 0px 0px;
  /*width: 200px;*/
}

--------------- UPDATE -----------------------------

http://jsfiddle.net/NZc6K/

这些小提琴应该可以解决问题。基本上这是因为100％宽度如何与填充一起工作，所以我将你在ul上的大填充移动到它被包裹的div。

要了解有关盒子模型的更多信息，请参阅http://www.addedbytes.com/articles/for-beginners/the-box-model-for-beginners/

Answer 2

使用css表，请参阅此处http://jsfiddle.net/UWLzL/22/。

Css来源：

#settingNev ul {
    display:table;
}
#settingNev ul li {
    display:table-row;
}
#settingNev ul li a {
    display: table-cell;
    border-radius: 6px 6px 0px 0px;
    color: #666;
    padding: 5px 3px;
    border: 1px solid transparent;
}
#settingNev ul li a:hover {
    border: 1px solid black;
    border-bottom: 1px solid transparent;
}