html - 浏览器调整大小时选项卡中断

Question

我已经设置了以下 JSFiddle 示例：http: //jsfiddle.net/kzvGz/

CSS：

ul#tabs
{
    width: 712px;
    margin: 0px;
    padding: 0px;
}
ul#tabs > li:first-child
{
    margin-left: 0px !important;
}
ul#tabs > li
{
    float: left;
    list-style-type: none;
    margin-left: 8px;
    padding-bottom: 0px !important;
    border: 1px solid #AAB7D5;
}

ul#tabs > li > a
{
    text-decoration: none;
    background-repeat: no-repeat;
    outline: 0;
    color: #515151;
    display: block;
    height: 42px;
    padding-left: 45px;
    padding-top: 10px;
    font-weight: bold;
    font-size: 88%;
}

ul#tabs > #tab0
{
    width: 166px;
}

ul#tabs > #tab1
{
    width: 227px;
}
ul#tabs > #tab2
{
    width: 130px;
}
ul#tabs > #tab3
{
    width: 157px;
}

HTML：

<div>
    <ul id="tabs">
        <li id="tab0"><a href="#">TEST TAB #1</a></li>
        <li id="tab1"><a href="#">TEST TAB #2</a></li>
        <li id="tab2"><a href="#">TEST TAB #2</a></li>
        <li id="tab3"><a href="#">TEST TAB #4</a></li>
    </ul>
</div>

当浏览器调整大小（ctrl + plus）时，它会将选项卡分成一个新行。我如何将所有内容放在一行中？

Answer 1

如果您正在谈论将文本分成两行，请更改

ul#tabs > li > a
{
  ...
  padding-left: 45px;
  ...
}

至

    text-align:center;

http://jsfiddle.net/kzvGz/1/

Answer 2

看来您已经使容器的文本有点大了。

尝试更改此设置，从：

ul#tabs > li > a
{
 padding-left: 45px;
}

对此：

ul#tabs > li > a
{
 padding-left: 40px;
}

所以文字会适合。