Позиционирующие элементы в одной навигационной панели (слева/вправо/вправо)

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 не может быть директором t ребенок ul, только li жестяная банка. В любом случае, нет необходимости в каких-либо дополнительных оболочках, поэтому я просто удалил их и переместил идентификатор к изображению.
2. , чтобы сделать ваш логотип всегда слева, я только что оставил его
3. , чтобы ваше меню всегда было справа, я просто плавал прямо.
4. Чтобы сосредоточить эту стрелу, я стал немного более креативным. Я позиционировал его абсолютным (обратите внимание на относительного на nav, чтобы он стал эталонным) и установите левый на 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>