Ден*_*лов 4 html css navigation
我无法弄清楚如何将它们放在同一条线上.
http://codepen.io/anon/pen/dovZdQ
<body>
<div class="navigation-bar">
<div id="navigation-container">
<img src="logo.png">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Get in Touch</a></li>
</ul>
</div>
</div>
</body>
在<ul>默认情况下是块元素,让它inline-block代替:
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display:inline-block;
vertical-align:top;
}
首先，让我们使用一些语义 HTML。
<nav class="navigation-bar">
<img class="logo" src="logo.png">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Get in Touch</a></li>
</ul>
</nav>
事实上，你甚至可以采用更简约的方式：
<nav class="navigation-bar">
<img class="logo" src="logo.png">
<a href="#">Home</a>
<a href="#">Projects</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Get in Touch</a>
</nav>
然后添加一些CSS：
.navigation-bar {
width: 100%; /* i'm assuming full width */
height: 80px; /* change it to desired width */
background-color: red; /* change to desired color */
}
.logo {
display: inline-block;
vertical-align: top;
width: 50px;
height: 50px;
margin-right: 20px;
margin-top: 15px; /* if you want it vertically middle of the navbar. */
}
.navigation-bar > a {
display: inline-block;
vertical-align: top;
margin-right: 20px;
height: 80px; /* if you want it to take the full height of the bar */
line-height: 80px; /* if you want it vertically middle of the navbar */
}
显然，实际的边距、高度和行高等取决于您的设计。
其他选项是使用表格或浮动来进行布局，但这些通常不受欢迎。
最后但并非最不重要的一点是，我希望你的神性炎能够得到治愈。
| 归档时间： |
|
| 查看次数： |
140034 次 |
| 最近记录： |