我有这个footer的菜单，我已经取得了包括ul和li，他们中的其中一个，只有内元素（孩子），而其他 ul元素有更多。现在，这是问题;如我行他们display: inline-block;ul与最小的儿童是低于其他两个ul元素的水平。由于孩子的不同，为什么ul元素低于其他ul元素？
为什么会发生这种情况，我如何解决这个问题，而没有填充或保证金欺诈？
这里是在fiddle.
一个例子正如你所看到的，功能菜单明显低于其他ul菜单，这让我又再次的问题;为什么会发生这种情况，我该如何解决？
如果代码对这个问题再次需要，我会很乐意遵守。
display: inline-block与vertical-align并列，默认值为baseline。
您需要在.menu这里设置vertical-align: top。为了安全起见，每当使用内联块时总是指定垂直对齐是很好的，因为你很少希望它成为基线。
哦，现在我明白了。所以'vertical-align'上的默认标准是'baseline'，它使得元素从头到尾都是从头开始的。因此，通过放置'top'，它可以使元素从上到下依次排列。非常感谢你为这个快速和可以理解的答案！ –
为了澄清，您必须将vertical-align：top属性放入CSS中的.menu类。它将在那里工作。 – ccopland
是的，做到了。作品绝对华丽。无论如何澄清！ –
这是因为您的第一个项目列表只包含两个项目，其他两个项目包含三个元素。在你的项目中，他们与底部对齐。现在你可以添加第三个元素或者改变你的css，使它在顶部对齐。
这就是我最初做的，然而，由于我不需要它而改变它，它看起来很糟糕。因此，这个问题。无论如何，感谢乐天派的帮助，Micheal！ –
完美;）现在我真的很放心;） – Michael
使用vertical-align: top像：
.footer {
\t width: 100%;
\t height: 30em;
\t width: 100%;
\t background-color: #f7f8fc;
}
.option {
\t display: flex;
\t position: relative;
}
.menu-wrapper {
\t width: 50%;
\t position: relative;
\t left: 50%;
\t transform: translate(-50%);
}
.menu {
\t display: inline-block;
\t padding: 0 1em;
vertical-align: top;
}
.menu ul {
\t padding: 1em 0;
}
.menu li {
\t padding: 0.5em 0;
}
.menu h6 {
\t font-size: 0.8em;
\t font-weight: 600;
\t color: #7c919c;
\t text-transform: uppercase;
\t letter-spacing: 0.5px;
\t font-family: 'Lato', sans-serif;
}
.menu a {
\t color: #717585;
\t font-size: 0.85em;
\t font-family: 'Roboto', sans-serif;
}
.menu a:hover {
\t color: #ba226c;
}<footer class="footer">
\t \t \t <div class="container customize">
\t \t \t \t <div class="option">
\t \t \t \t \t <div class="menu-wrapper">
\t \t \t \t \t \t <div class="feature menu">
\t \t \t \t \t \t \t <ul>
\t \t \t \t \t \t \t \t <li>
\t \t \t \t \t \t \t \t \t <h6>Feature</h6>
\t \t \t \t \t \t \t \t </li>
\t \t \t \t \t \t \t \t <li><a href="#">Terms of Use</a></li>
\t \t \t \t \t \t \t \t <li><a href="#">Privacy Policy</a></li>
\t \t \t \t \t \t \t </ul>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="about menu">
\t \t \t \t \t \t \t <ul>
\t \t \t \t \t \t \t \t <li>
\t \t \t \t \t \t \t \t \t <h6>About</h6>
\t \t \t \t \t \t \t \t </li>
\t \t \t \t \t \t \t \t <li><a href="#">About Us</a></li>
\t \t \t \t \t \t \t \t <li><a href="#">Explore</a></li>
\t \t \t \t \t \t \t \t <li><a href="#">Pricing</a></li>
\t \t \t \t \t \t \t </ul>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="support menu">
\t \t \t \t \t \t \t <ul>
\t \t \t \t \t \t \t \t <li>
\t \t \t \t \t \t \t \t \t <h6>Support</h6>
\t \t \t \t \t \t \t \t </li>
\t \t \t \t \t \t \t \t <li><a href="#">Support</a></li>
\t \t \t \t \t \t \t \t <li><a href="#">Blog</a></li>
\t \t \t \t \t \t \t \t <li><a href="#">FAQ</a></li>
\t \t \t \t \t \t \t </ul>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </footer>希望这有助于！
当然，正如Matis在他的回答中所说的。无论如何谢谢！ :) –
@JamesSnowy我的不好。我迟到了。浪费时间使片段... :) –
哈哈，尽管欣赏热情！ ;） –
你需要一个[mcve] *在你的问题* – j08691