私はulとliから成る作ったこのfooterメニュー、他の ul要素が多くを持っているのに対してのみ、内要素（子どもを）持っている、そのうちの一つを持っています。今、ここに問題があります。私がそれらの線を並べると、display: inline-block;ulは、最小の子が他のの2つの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
そうですね。絶対に素晴らしい作品です。どうもありがとうございました！ –
最初のアイテムリストには2つのアイテムしか含まれておらず、残りの2つのアイテムには3つの要素が含まれているからです。あなたのプロジェクトでは、彼らは底に揃えています。これで、3番目の要素を追加したり、CSSを変更したりして、上に並んで配置することができます。
それはまさに私が最初にやったことでしたが、私はそれを必要としないために変更したので、ひどく見えました。したがって、この質問。とにかく、マイケルを助ける楽観主義のおかげで！ –
完璧;）今私は本当に安心しています;） – 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>・ホープ、このことができます！
確かに、マティスが彼の答えで言ったように。どうもありがとう！ :) –
@JamesSnowy私の悪い。私は遅刻しました。スニペットを作る無駄な時間... :) –
母、熱意に感謝！ ;） –
ご質問に[mcve] *が必要です。* – j08691