Question

我一直在尝试创建符合以下条件的导航栏：

跨度15％。
横跨100％宽度。
导航栏与网站顶部对齐。
导航栏中的元素在其中垂直居中。
最后一个菜单选项与导航栏的最右侧对齐。

我一直在玩<div>和<ul>来实现元素。我花了很多时间研究它并研究它。如果我使用百分比高度，我似乎无法找到一种垂直居中元素的方法，即图像。我认为这个问题是因为<header>和<nav>元素是块元素，div元素也是如此，因为“vertical-align”仅适用于内联元素。

问题，对于那些足够聪明的人来说，提供可能很简单的答案：

如果我将“display”元素覆盖为“inline”值，我可以在块元素上使用“vertical-align”吗？似乎答案是否定的。
我可以在<li>内右对齐一个<ul>，而另一个<li>左对齐吗？
我能让它工作的唯一方法是在导航栏上使用固定高度值以及在元素周围填充。这是我唯一的选择还是有人知道我可以使用百分比高度的方式吗？

表达我想做的基本代码（假设所有<html>和其他基础标签也在那里;我知道下面的代码不起作用，但它显示了基本的想法）：

<style>
html, body {
height: 100%;
width: 100%;
}

.menu_bar {
display: inline; /* This element seems to mess things up pretty bad so I assume I can't do it       
that way. I was only using it so my <ul> would be within an inline element which would allow me 
to use vertical-align. */
height: 15%;
width: 100%;
background-color: #000000;
}

.menu_items {
height: 100%;
width: 100%;
}

.menu_logo {
vertical-align: middle;
text-align: left;
}

.menu_option1 {
vertical-align: middle;
text-align: left;
}

.menu_option2 {
vertical-align: middle;
text-align: left;
}

.menu_option3 {
vertical-align: middle;
text-align: right;
}
</style>

<body>

<header>
<nav>

<div class="menu_bar">

<ul class="menu_items">
<li class="menu_logo"><a href="#"><img src="images/logo.gif"></a></li>
<li class="menu_option1"><a href="#"><img src="images/option1.gif"></a></li>
<li class="menu_option2"><a href="#"><img src="images/option2.gif"></a></li>
<li class="menu_option3"><a href="#"><img src="images/option3.gif"></a></li>
</ul>

</div>

</nav>
</header>

</body>

带垂直居中元素的导航栏

0 个答案: