在同一個導航欄中定位元素（左/中/右）

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>