CSS / HTML 导航和徽标在同一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30624709/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS / HTML Navigation and Logo on same line
提问by Денислав Ангелов
I can't figure out how to put them on the same line.
我不知道如何将它们放在同一条线上。
http://codepen.io/anon/pen/dovZdQ
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>
回答by Jacob Gray
The <ul>is by default a block element, make it inline-blockinstead:
在<ul>默认情况下是块元素，让它inline-block代替：
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display:inline-block;
vertical-align:top;
}
CodePen Demo
代码笔演示
回答by light
Firstly, let's use some semantic HTML.
首先，让我们使用一些语义 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>
In fact, you can even get away with the more minimalist:
事实上，你甚至可以摆脱更简约的：
<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>
Then add some CSS:
然后添加一些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 */
}
Obviously, the actual margins, heights and line-heights etc. depend on your design.
显然，实际的边距、高度和行高等取决于您的设计。
Other options are to use tables or floats for layout, but these are generally frowned upon.
其他选项是使用表格或浮点数进行布局，但这些通常不受欢迎。
Last but not least, I hope you get cured of div-itis.
最后但并非最不重要的一点，我希望你能治愈 div-itis。
回答by Paulie_D
You need to apply the logoclass to the image...then float the ul
您需要将该logo类应用于图像...然后浮动ul
HTML
HTML
<img class="logo" src="http://i.imgur.com/hCrQkJi.png">
CSS
CSS
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
float: left;
background: white;
}
回答by hopkins-matt
Try this CSS:
试试这个 CSS：
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: 1200px;
margin: 0 auto;
height: 70px;
}
.navigation-bar {
background-color: #352d2f;
height: 70px;
width: 100%;
}
#navigation-container img {
float: left;
}
#navigation-container ul {
padding: 0px;
margin: 0px;
text-align: center;
display:inline-block;
}
#navigation-container li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
}
#navigation-container li a {
color: white;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
}
#menu {
float: right;
}
回答by ericleit
1) you can float the image to the left:
1）您可以将图像浮动到左侧：
<img style="float:left" src="http://i.imgur.com/hCrQkJi.png">
2)You can use an HTML table to place elements on one line.
2）您可以使用 HTML 表格将元素放在一行上。
Code below
下面的代码
<div class="navigation-bar">
<div id="navigation-container">
<table>
<tr>
<td><img src="http://i.imgur.com/hCrQkJi.png"></td>
<td><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>
</td></tr></table>
</div>
