0

有许多类似的主题，但我看过的主题都没有帮助我解决我遇到的问题。基本上，我有一组要在页面中心对齐的选项卡。不幸的是，它们看起来有点偏左，看起来非常糟糕。也许我错过了一些明显的东西，但是在研究了将近一个小时的代码之后，我开始认为这个问题有点复杂。

我准备了一个 jsFiddle：http: //jsfiddle.net/5NTY5/

 <div style="text-align:center;">The tabs below should line up with this text.</div>
<br/>
<div style="text-align:center;">
    <ul class="_t_ul">
        <li class="_t_li">Tab 1</li>
        <li class="_t_li">Tab 2</li>
        <li class="_t_li">tab 3</li>
    </ul>
</div>
<br/>
<div style="text-align:center;">As you can see, it isn't even close.</div>

 ._t_ul {

    line-height:33px;

    list-style:none;

}

._t_li {

    display: inline;

    cursor:pointer;

    text-align:center;

    color: #698da5;

    font-family:'Anton', sans-serif;

    font-size: 14px;

    font-weight:bold;

    text-align:center;

    padding:16px;

    background-color: rgba(82%, 82%, 82%, 0.5);

    border: 1px solid #acadaf;

    border-radius: 4px;

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;

}

._t_li:hover {

    background-color: rgba(82%, 82%, 82%, 0.8);

}

此外，我能够使用内联元素使其正确对齐，但我想知道是否可以使用块（例如 li 和 div）。

4

3 回答 3

1 
._t_ul {
   padding: 0;
    margin: 0;
    line-height: 33px;
    list-style: none;
}

试试看

于 2013-08-28T03:11:11.590 回答
0

如果您希望将选项卡单独对齐到水平中心，请在嵌套选项卡的 div 上使用这行代码。

margin-left: auto;
margin-right: auto;

如果您希望将选项卡与文本的左边缘对齐，请对两个 div 使用相同的 margin-left 值。

这一切都假设您已经清理了默认边距并在文档开头的 li 和 ul 上填充了浏览器集。

li, ul{
margin:0;
padding:0;
}
于 2013-08-28T03:18:26.997 回答
0

对于这种事情，请尝试使用margin-right:auto; margin-left: auto并设置选项卡的固定宽度，而不是仅应用text-align:center.

这是一个有效的 JSFiddle：http: //jsfiddle.net/eshellborn/SASSe/

于 2013-08-28T03:21:12.700 回答