Question

使用开发人员工具，我试图找出我的3个标签占据页面整个宽度的原因。该网站是：

http://pages.purolator.com/en/courier-shipping-services/

由于某种原因，页面越大，选项卡控件右侧添加的填充或边距就越多。

有人可以帮我识别这个看不见的边距/填充???

Answer 1

li元素的宽度为30％，因此它们一起仅占页面宽度的90％。

您可以将其更改为33.33333％，这是近似值，但足够接近。但是，由于li元素的边距，这会让您遇到麻烦。此边距将添加到其宽度。

解决方案是从li元素中删除边距。如果要在中间显示一些空格，可以通过使li元素仅仅是看起来像制表符的div的容器来实现。但是后来我得到了太多的细节，而你可能对如何解决这个问题有自己的想法。

以下是它的外观：

<ul>
    <li><div>This is tab 1</div></li>
    <li><div>This is tab 2</div></li>
    <li><div>This is tab 3</div></li>
</ul>

CSS：

li {
    display: inline-block;
    /* Set box-sizing to border-box so you can add padding without affecting the width of the box */
    box-sizing: border-box;
    padding: 0 0.2em;
    /* This element should consume 100/elementCount% of its parent. */
    width: 33.33333%;
}

li div {
    /* Style this as a tab. */
}

演示：http://jsfiddle.net/skJQ9/

Answer 2

正如@GolezTrol所说，它只有30％的宽度，并且你继承了边距，你可以使用谷歌浏览器开发工具来查看计算值。

您应该使用！important标记中断继承，然后将宽度调整为接近（100/3％）。

Answer 3

试试LI：

.ui-tabs .ui-tabs-nav li {
  width: 33.33%;
  margin: 0; /* for left and right this MUST be 0 */
  padding: 0.1em 0.2em; /* replace margin with padding */
  box-sizing: border-box; /* make sure that the padding is included in your 33.33% and not added */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.ui-tabs .ui-tabs-nav li:last-child {
width: 33.34%; /* so it adds up to 100% and not to 99.99% */
}

如何找到＆＃34;隐藏＆＃34;填充/保证金

3 个答案: