<ul>比列表项</ul>更宽

Question

我有一个包含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，如：

标签ul

{     宽度：100％;     list-style：none;     text-align：left;     display：inline-block; }

我现在知道了：

Answer 1

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

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

Answer 2

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

#tabs ul {
    display: inline-block;
}

Answer 3

Working Fiddle

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