【问题标题】：<ul> is wider than list items<ul> 比列表项宽
【发布时间】：2014-03-06 11:33:32
【问题描述】：

我有一个包含 4 个列表项的水平列表。我想实现让<ul> 不超过<li>s 的累积宽度的简单任务现在我的<ul> 更宽。在 Firefox 的代码检查器中，它看起来像：

这是 HTML：

<div id="content-container">
   <div id="tabs">
      <ul>
         <li>Publications</li><li>URLs</li><li>Global Folders</li><li>Private Folders</li>
      </ul>
   </div>
</div>

CSS：

#content-container
{
    width: 65%;
    float: right;
    background-color: Red;
}

#tabs
{
    width: 100%;
    text-align: left;
    margin: 10px 0 0 10px;
}

#tabs ul
{
    width: 100%;
    list-style: none;
    text-align: left;
}

#tabs ul li
{
    display: inline;
    background-color: #3E93CF;
    font-size: 24px;
    font-weight: bold;
    padding: 7px 10px 7px 10px;
    font-family: "Segoe UI",Verdana,Helvetica,Sans-Serif;
    color: #FFF;
    border-left: 1px solid #FFF;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
}

#tabs ul li:last-child
{
    border: 1px solid #FFF;
}

编辑：

添加了 display: inline-block like:

标签页

{ 宽度：100%；列表样式：无；文本对齐：左；显示：内联块； }

我现在明白了：

【问题讨论】：

您是否正在尝试做类似this 的事情？

标签： html css

【解决方案1】：

浏览器会自动在列表左侧添加填充。这会为项目符号点创建默认空间。您需要将填充设置为零：

#tabs ul {
    padding: 0;
    width: 100%;
    list-style: none;
    text-align: left;
    display: inline-block;
}

【讨论】：

【解决方案2】：

ul 是块级元素，因此会占用所有可用空间。尝试改用inline-block。

#tabs ul {
    display: inline-block;
}

【讨论】：

【解决方案3】：

Working Fiddle

#tabs ul{
width: 100%;
list-style: none;
display:inline-block;
text-align:left;
padding:0;
}

【讨论】：

另外，您链接到的那个小提琴也有同样的问题 - 看起来像但不是，左边的填充。