导航栏对齐方式
导航栏对齐方式
提问于 2014-08-26 15:05:37
这是我目前的代码。我希望它产生一个导航栏，图像和文本旁边的图像和文本在最左边的同一行上(它确实是这样做的)，所有在class="top_info“中的菜单项都在同一行上，除非它们被拉到右边一点。有人能帮我吗？
<!DOCTYPE html>
<html>
<head>
<style>
body {background: ; margin: ; }
#container {width: ; margin:; background: #333300 ; }
#header {color: white;}
#logo { font-size: 18pt;}
#logo img {float: left ;}
#logo span {color:orange; }
.top_info {float:left; color:white;}
</style>
</head>
<body>
<div id="container">
<!--header-->
<div id="header">
<div id="logo"><img src="http://www.townplanning.com.au/app/theme/default/design/images/header/logo.png"><span>TOWNPLANNING</span>.COM.AU</p></div>
<div class="top_info">CONTACT US</div>
<div class="top_info">BLOG</div>
<div class="top_info">NEWS</div>
<div class="top_info">PREVIOUS VCAT DECISIONS</div>
<div class="top_info">PLANNING SCHEMES</div>
<div class="top_info">WHAT IS TOWN PLANNING?</div>
<div class="top_info">MAP</div>
<div class="top_info">ABOUT</div>
<div class="top_info">HOME</div>
</div> <!--div header end-->
</div> <!--DIV CONTAINTER end-->回答 1
Stack Overflow用户
发布于 2014-08-26 15:50:38
- 假设徽标和文本应该在第一行，菜单应该在第二行，我已经编辑了代码。
请看小提琴：
HTML
<div id="container">
<!--header-->
<div id="header">
<div id="logo"><img src="http://www.townplanning.com.au/app/theme/default/design/images/header/logo.png"/><span>TOWNPLANNING</span>.COM.AU</div>
<ul class="top_info">
<li >CONTACT US</li>
<li >BLOG</li>
<li >NEWS</li>
<li >PREVIOUS VCAT DECISIONS</li>
<li >PLANNING SCHEMES</li>
<li >WHAT IS TOWN PLANNING?</li>
<li >MAP</li>
<li >ABOUT</li>
<li >HOME</li>
</ul>
</div> <!--div header end-->
</div> <!--DIV CONTAINTER end-->CSS
#container { margin:0; background: #333300 ;overflow:auto; }
#header {color: white;}
#logo { font-size: 18pt;}
#logo img {float: left ;}
#logo span {color:orange; }
ul{padding:0;}
.top_info li{ color:white;}
ul li{display:inline-block;list-style:none;}- 使用
ul li创建菜单始终是最佳实践。并将它们设置为display:inline-block样式，这将使它们显示在一行中。 - 我已将该类应用于
ul标记，但在div中重复这么多次并不是一个好做法。
2.假设徽标和菜单应该在同一行，请查看小提琴：
CSS:
#container { margin:0; background: #333300 ; overflow:auto; }
#header {color: white;}
#logo { float:left;font-size: 18pt;}
#logo img {float: left ;}
#logo span {color:orange; }
.top_info li{ color:white;}
ul li{display:inline-block;list-style:none;}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25499945
复制相关文章
相似问题
腾讯云开发者
