在同一个导航栏中定位元素（左/中/右）

Question

我正在制作一个简单的导航栏，左侧有一个徽标，中间有一个图像，右侧有一些链接。

我想这一切都在一条线上，彼此相邻，但出于某种原因，我没有设法得到与其余部分在同一条线上的链接。

你可以看到我的作品here。这是代码：

html { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    background-color: #D8D8D8; 
 
    color: white; 
 
    border: 0; 
 
    padding: 0; 
 
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; 
 
} 
 
nav { 
 
    background-color: #888888; 
 
} 
 
#links { 
 
    height: 30px; 
 
    padding: 10px; 
 
    margin: 0; 
 
} 
 
#links li { 
 
    text-align: center; 
 
    margin: 0; 
 
    height: 30px; 
 
    padding: 0; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    list-style-type: none; 
 
    display: inline; 
 
} 
 
#container { 
 
    min-width: 624px; 
 
    min-height: 100%; 
 
    position: relative; 
 
} 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#links { 
 
    overflow: auto; 
 
    list-style-type: none; 
 
} 
 
#links li { 
 
    height: 25px; 
 
    float: right; 
 
    margin-right: 0; 
 
    border-right: 1px solid #aaa; 
 
    padding: 0 20px; 
 
} 
 
#links li:first-child { 
 
    border-right: none; 
 
} 
 
#links li a { 
 
    text-decoration: none; 
 
    color: #ccc; 
 
    font: 25px/1 Helvetica, Verdana, sans-serif; 
 
    text-transform: uppercase; 
 
    transition: all 0.5s ease; 
 
} 
 
#links li a:hover { 
 
    color: #666; 
 
} 
 
#links li.active a { 
 
    font-weight: bold; 
 
    color: #333; 
 
} 
 
#logo img { 
 
    height: 50px; 
 
    float: left; 
 
    margin-left: 10px; 
 
    cursor: pointer; 
 
} 
 
#arrow { 
 
    text-align: center; 
 
} 
 
#arrow img { 
 
    height: 30px; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    cursor: pointer; 
 
}

<div id="container"> 
 
    <nav> 
 
    <ul id="logo"> 
 
     <img src="images/logo_tekst.png"> 
 
    </ul> 
 
    <ul id="arrow"> 
 
     <img src="images/remove-arrow-hi.png"> 
 
    </ul> 
 
    <ul id="links"> 
 
     <li class="link"><a href="index_pro.html">Pro</a> 
 
     </li> 
 
     <li class="link"><a href="index.html">Recreative</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</div>

Answer 1

剥离到最低限度，只有要领，使定位工作的代码，应该是这个样子：

<div id="container"> 
    <nav> 
     <img id="logo" src="images/logo_tekst.png" /> 
     <img id="arrow" src="images/remove-arrow-hi.png" /> 
     <ul id="links"> 
      <li> <a href="index_pro.html">Pro</a> 

      </li> 
      <li> <a href="index.html">Recreative</a> 

      </li> 
     </ul> 
    </nav> 
</div> 

nav { 
    position: relative; 
} 
#logo { 
    float: left; 
} 
#links { 
    float: right; 
} 
#links > li { 
    float: left; 
    margin-left: 10px; 
} 
#arrow { 
    position: absolute; 
    left: 50%; 
    width: 40px; 
    margin-left: -20px; /* halve the width of the image */ 
} 

我做了什么：

1. 我修正了你的html，img不能成为direc t的孩子ul，只有li可以。无论如何不需要任何额外的包装，所以我只是删除它们，并将id移到图像上。
2. 为了让您的标志始终位于左侧，我只是将它左移
3. 为了让您的菜单始终位于右侧，我只是将其右移。
4. 以箭头为中心，我更有创意。我将其定位为绝对位置（注意导航中的相对位置，因此它将作为参考），并将左侧设置为50％。这会导致图像的左边缘处于中心位置。然后，我通过将左边距设置为将图像的宽度减半来将该边缘向左移动。如果您事先不知道图像的宽度（或者它不是图像，而是某种动态内容），则也可以使用transform: translate(-50%,0)而不是左边距来获得相同的效果。

的演示可以在这里找到：http://jsfiddle.net/73ejv2sg/

Answer 2

你的问题是，你只float您的标志。您需要float所有元素并添加padding或width以对齐。还要将高度添加到nav以显示背景。

根据您的意见位置绝对和设置left：

#arrow { 
    position:absolute; 
    left:45%; 
} 

这里我只设置45％，但你可以使用JavaScript来轻松地抓取屏幕和图像宽度的宽度，并强制其中心每时间。

$(document).ready(function() { 
 
    var imageWidth = $("#arrow").width(); 
 
    var pageWidth = $(window).width(); 
 

 
    var left = ((pageWidth/2) - (imageWidth/2)); 
 

 
    $("#arrow").css('left',left); 
 
}); 
 

 
$(window).resize(function() { 
 
    
 
    var imageWidth = $("#arrow").width(); 
 
    var pageWidth = $(window).width(); 
 

 
    var left = ((pageWidth/2) - (imageWidth/2)); 
 

 
    $("#arrow").css('left',left); 
 
    
 
}

html { 
 
height: 100%; 
 
margin:0; 
 
padding:0; 
 
} 
 

 
body { 
 
    height:100%; 
 
    margin:0; 
 
    background-color:#D8D8D8 ; 
 
    color:white; 
 
    border:0; 
 
    padding:0; 
 
    font-family: "Helvetica Neue",Arial, Helvetica, sans-serif; 
 
} 
 

 
nav { 
 
    background-color: #888888; 
 
    height:55px; 
 
} 
 

 
#links { 
 
    height:30px; 
 
    padding:10px; 
 
    margin:0; 
 
} 
 

 
#links li { 
 
    text-align:center; 
 
    margin:0; 
 
    height:30px; 
 
    padding:0; 
 
    padding-left:10px; 
 
    padding-right:10px; 
 
    list-style-type: none; 
 
    display:inline; 
 
} 
 

 
#container { 
 
    min-width: 624px; 
 
    min-height:100%; 
 
    position:relative; 
 
} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#links { 
 
    overflow: auto; 
 
    list-style-type: none; 
 
    float:right; 
 
} 
 

 
#links li { 
 
    height: 25px; 
 
    float: right; 
 
    margin-right: 0; 
 
    border-right: 1px solid #aaa; 
 
    padding: 0 20px; 
 
} 
 

 
#links li:first-child { 
 
    border-right: none; 
 
} 
 

 
#links li a { 
 
    text-decoration: none; 
 
    color: #ccc; 
 
    font: 25px/1 Helvetica, Verdana, sans-serif; 
 
    text-transform: uppercase; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#links li a:hover { 
 
    color: #666; 
 
} 
 

 
#links li.active a { 
 
    font-weight: bold; 
 
    color: #333; 
 
} 
 

 
#logo img { 
 
    height:50px; 
 
    float:left; 
 
    margin-left:10px; 
 
    cursor:pointer; 
 
} 
 

 
#arrow { 
 
    position:absolute; 
 
    left:45%; 
 
} 
 

 
#arrow img { 
 
    height:30px; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <nav> 
 
     <ul id="logo"> 
 
      <img src="images/logo_tekst.png"> 
 
     </ul> 
 
     <ul id="arrow"> 
 
      <img src="images/remove-arrow-hi.png"> 
 
     </ul> 
 
     <ul id="links"> 
 
      <li class="link"><a href="index_pro.html">Pro</a></li> 
 
      <li class="link"><a href="index.html">Recreative</a></li> 
 
     </ul> 
 

 
    </nav> 
 
</div>