Question

所以我正在制作一个网页，为此我制作一个包含4个链接/标签，标识和下拉菜单的标题，当有人在第4个标签上悬停以显示隐藏的第5个标签时。一切正常，除非我似乎无法获得第5个标签（“cater标签”）以使与其他四个具有相同的填充，即使它们都具有相同的类“标签”。相反，它给它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/

谢谢！

Answer 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>的孩子。

这是一个可能的代码段

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>

Answer 2

问题源自display: table风格的.dropdown。删除它，填充恢复正常。但是，这可能不是理想的方法。通常，display: table div内部将被指定为显示为display: table-column

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

2 个答案: