为什么同一类的所有元素都没有相同的填充？答案

【问题标题】：Why don't all elements with the same class have the same padding?为什么同一类的所有元素都没有相同的填充？
【发布时间】：2015-10-03 21:54:49
【问题描述】：

所以我正在制作一个网页，为此我正在制作一个包含 4 个链接/选项卡、一个徽标和一个下拉菜单的标题，当有人将鼠标悬停在第 4 个选项卡上以显示隐藏的第 5 个选项卡时。一切正常，除了我似乎无法让第 5 个选项卡（“餐饮选项卡”）具有 与其他四个选项卡相同的填充，即使它们都具有相同的类“选项卡”。相反，它给它 0 填充。我想知道为什么会这样，是否有办法解决它？

这是我的html：

<div class="header">
    <ul>
        <li class="tab"><a>Home</a></li>
        <li class="tab"><a>About</a></li>
        <li id="logo">
            <img src="images/logo.png" width="260" height="95"/>
        </li>
        <li class="tab"><a>Menu</a></li>
        <ul class="dropdown_container">
            <li class="tab super_tab"><a>Order</a></li>
            <div class="dropdown">
                <li class="tab sub_tab"><a>Cater</a></li>
            </div>
        </ul>
    </ul>
</div>

这是我的 CSS：

ul {
    margin: 0;
    padding: 0;
}
li {
    list-style-type: none;
}
.header{
    text-align: center;
    background-color: red;
}
.tab, #logo{
    padding-right: 2.4%;
    padding-left: 2.4%;
    display: inline-block;
    vertical-align: middle;
    border: 2px solid black;
}
.dropdown{
    display: table;
}
.dropdown_container{
    display: inline;
}
.sub_tab{
    margin-left: 0;
}

这是一个 jsfiddle 演示：https://jsfiddle.net/90udrejh/

谢谢！

【问题讨论】：

你缺少一个标签。
谢谢，但正如您所知，这并不能解决问题。
所以“订单”项的填充不正确，对吗？还是“餐饮”项目？
这是“餐饮”项目。抱歉，我将对其进行编辑以使其更清楚。
哦，抱歉，没有考虑填充问题。可以尝试为其添加一个 id 并分配自定义填充？

标签： html css

【解决方案1】：

根据MDN

Padding

适用于除table-row-group、table-header-group、 table-footer-group、table-row、table-column-group 和 table-column。它也适用于::first-letter。

因此，只需将您的 display:table 从 .dropdown 更改为您喜欢的另一个值，并且您不能将 <div> 作为 <ul> 的子级。

这是一个可能的sn-p

ul {
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
}
.header {
  text-align: center;
  background-color: red;
}
.tab,
#logo {
  padding-right: 2.4%;
  padding-left: 2.4%;
  display: inline-block;
  vertical-align: middle;
  border: 2px solid black;
}
.dropdown,
.dropdown_container {
  display: inline-block;
}
.sub_tab {
  margin-left: 0;
}

<div class="header">
  <ul>
    <li class="tab"><a>Home</a>
    </li>
    <li class="tab"><a>About</a>
    </li>
    <li id="logo">
      <img src="images/logo.png" width="260" height="95" />
    </li>
    <li class="tab"><a>Menu</a>
    </li>
    <ul class="dropdown_container">
      <li class="tab super_tab"><a>Order</a>
      </li>
      <li class="dropdown">
        <span class="tab sub_tab"><a>Cater</a></span>
      </li>
    </ul>
  </ul>
</div>

【讨论】：

好的，这解决了 jsfiddle 示例中的问题！不过，现在我尝试将它实现到我的原始代码中，我发现问题也出在其他地方。如果我用我的原始代码问一个类似的问题，看看是否有人知道答案，你认为这可以吗？
是的，最好用相关代码问另一个问题。

【解决方案2】：

问题源自.dropdown 样式中的display: table。删除它，填充恢复正常。但是，这可能不是所需的方法。通常，在display: table 内部的 div 将被分配为显示为display: table-column

【讨论】：