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

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

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

---

有人能帮我识别这个不可见的边距/填充吗？

元素的宽度是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>

---

演示：

正如@GolezTrol所说，它只有30%的宽度，并且您继承了边距，您可以使用google chrome开发者工具查看计算值

您应该使用！重要标记，然后将宽度调整为接近（100/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% */
} 

---

提醒你，这实际上不适用于网站的当前布局。这个答案的主要目的是解释差距的来源。我看到了仅仅将其宽度设为“33.33333%”的缺陷，但由于它几乎是一个完整的页面，我不应该重写他的整个CSS。你真的认为这个答案“没有用”吗？Razvan，这似乎是对的，但当我在“li”中添加填充时，它并没有分隔选项卡，只是扩展了选项卡。选项卡的背景应该显示在它们的内部。因此，在li中添加一个填充（如padding:05px；）并为a上的选项卡设置背景，添加一个{display:block；width:100%；}

.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% */
}