如何找到“隐藏的”填充/边距

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% 的宽度，并且您继承了边距，您可以使用 google chrome 开发人员工具查看计算值。

您应该使用 !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% */
}