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;
}

到此：

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

所以文字适合。

Answer 2

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

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

到

    text-align:center;

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

浏览器调整大小时标签会中断

2 个答案: