Html 如何对齐左侧的徽标和右侧的导航？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35076466/
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
How to align logo at left and navigation on right side?
提问by ms.tery
How to align the logo to my navigation bar?
如何将徽标与我的导航栏对齐？
My HTML code is:
我的 HTML 代码是：
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/png" href="SENCOR_Logo.ico">
<title>SENCOR</title>
</head>
<body>
<div class="bg-div">
<img class="logo-img" src="SENCOR_Logo.jpg" ALT="align box" ALIGN=CENTER>
<nav>
<ul>
<li><a href="#">Monitoring</a></li>
<li><a href="#">Process</a></li>
<li><a href="#">Post and Create Email/Excel</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Sales</a></li>
</ul>
</nav>
</div>
</body>
</html>
and heres my style.css code:
这是我的 style.css 代码：
body{
margin: 0;
padding: 0;
font-size: 15px;
}
/* Navigation */
nav{
margin: 0;
overflow:hidden;
text-align: center;
}
nav ul{
margin: 0;
padding: 0;
}
nav ul li{
display: inline-block;
list-style-type: none;
}
nav > ul > li > a{
color: #aaa;
display: block;
line-height: 2em;
padding: 0.5em 1em;
text-decoration: none;
}
-----------
.logo-img{
position: relative;
margin: 10px 15px 15px 10px;
}
.bg-div{
background:#333;
}
I want to display the logo at the left side and the navigation bar to the right side.
我想在左侧显示徽标，在右侧显示导航栏。
回答by Todd Moore
Here's a pen:
这是一支笔：
http://codepen.io/toddmoore/pen/JGvVpB
http://codepen.io/toddmoore/pen/JGvVpB
.logo-img {
float: left;
position: relative;
margin: 10px 15px 15px 10px;
}
.bg-div {
overflow: hidden;
}
nav {
float: left;
}
I assuming that you want them to be set in the traditional way. If you want the nav on the opposite side of the page floatit right.
我假设您希望以传统方式设置它们。如果你想在页面的另一侧的资产净值float它right。
You could also implement this using flex, but for now I would stick to floatif you're new to css.
你也可以使用 来实现这个flex，但现在我会坚持，float如果你是 css 新手。
The overflow hiddenallows the container of the two floated elements to expand to their height, otherwise because floats escape the flow of the document the container collapses.
在overflow hidden允许两个浮动元素的容器扩大了自己的身高，否则因为彩车逃脱文件容器崩溃的流动。
回答by hungerstar
The simplest and most basic answer is, use floats.
最简单和最基本的答案是，使用浮动。
.logo-img {
float: left;
}
nav {
float: right;
}
回答by Heron Yang
Normally, it's better to use "position: fixed;" for navigation bars on top. So, your css can do like this:
通常，最好使用“位置：固定；” 用于顶部的导航栏。所以，你的 css 可以这样做：
.logo-img{
position: fixed;
margin: 10px 15px 15px 10px;
left: 0;
display:inline;
}
.bg-div{
background:#333;
height: 50px;
}
.bg-div nav {
position: fixed;
display:inline;
right: 0;
}
