Question

我有footer这个由ul和li组成的ul菜单，其中一个只有两个元素（其中两个 display: inline-block;元素有更多。现在，问题出在这里;当我将它们排成ul时，具有最少子项的ul低于其他两个 ul元素的级别。

为什么会发生这种情况？如何在没有填充或边际作弊的情况下解决这个问题？

以下是fiddle.

中的示例

正如您所看到的，功能菜单显然低于其他opcache.memory_consumption=128 opcache.interned_strings_buffer=8 opcache.max_accelerated_files=4000 opcache.revalidate_freq=60 opcache.fast_shutdown=1 opcache.enable_cli=1菜单，这让我再次提出问题;为什么会发生这种情况？我该如何解决？

如果对此问题再次需要代码，我非常乐意遵守。

Answer 1

display: inline-block与vertical-align齐头并进，默认值为baseline。

您需要在vertical-align: top课程中设置.menu。为了安全起见，在使用内联块时始终指定垂直对齐是很好的，因为您很少希望它成为基线。

Answer 2

这是因为您的第一个项目列表仅包含两个项目，另外两个项目包含三个元素。在您的项目中，它们与底部对齐。现在你可以添加第三个元素或更改你的css，使其在顶部对齐。

Answer 3

使用vertical-align: top之类的：

＆＃13;

.footer {
	width: 100%;
	height: 30em;
	width: 100%;
	background-color: #f7f8fc;
}
.option {
	display: flex;
	position: relative;
}
.menu-wrapper {
	width: 50%;
	position: relative;
	left: 50%;
	transform: translate(-50%);
}
.menu {
	display: inline-block;
	padding: 0 1em;
    vertical-align: top;
}
.menu ul {
	padding: 1em 0;
}
.menu li {
	padding: 0.5em 0;
}
.menu h6 {
	font-size: 0.8em;
	font-weight: 600;
	color: #7c919c;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-family: 'Lato', sans-serif;
}
.menu a {
	color: #717585;
	font-size: 0.85em;
	font-family: 'Roboto', sans-serif;
}
.menu a:hover {
	color: #ba226c;
}

＆＃13;

<footer class="footer">
			<div class="container customize">
				<div class="option">
					<div class="menu-wrapper">
						<div class="feature menu">
							<ul>
								<li>
									<h6>Feature</h6>
								</li>
								<li><a href="#">Terms of Use</a></li>
								<li><a href="#">Privacy Policy</a></li>
							</ul>
						</div>

						<div class="about menu">
							<ul>
								<li>
									<h6>About</h6>
								</li>
								<li><a href="#">About Us</a></li>
								<li><a href="#">Explore</a></li>
								<li><a href="#">Pricing</a></li>
							</ul>
						</div>
						<div class="support menu">
							<ul>
								<li>
									<h6>Support</h6>
								</li>
								<li><a href="#">Support</a></li>
								<li><a href="#">Blog</a></li>
								<li><a href="#">FAQ</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</footer>

＆＃13;

希望这有帮助！

为什么ul元素由于孩子的不同而低于其他ul元素？

3 个答案: