Как разместить div внутри середины navbar?

Question

Конечной целью для этого будет иметь «CodePlayer» в крайнем левом углу. В самом центре выстроены .toggles ul («HTML/CSS/JS/Result»), а кнопка «запустить», которая написана на далеко правее.

У моего инструктора всегда есть возможность использовать float: left и float: право выравнивать элементы внутри div, и из всего, что я узнал здесь, это ужасный способ сделать что-то. Итак, я пытаюсь перейти изгоев и начать использовать display: inline-block, но я не могу понять, как получить «html/css/js/result», выстроенный в середине страницы.

Как получить каждый соответствующий div, расположенный слева, посередине и справа?

http://jsfiddle.net/m2c4j3bu/

CSS:

body { 
     font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
     font-weight: 300; 
    } 


    #menuBar { 
     width: 100%; 
     height: 2.5em; 
     background-color: #E6E6E6; 

    } 


    #logo { 
     font-weight: bold; 
     font-size: 1em; 
     font-family: helvetica; 
     display: inline-block; 
     margin: 10px 0 0 10px; 
     vertical-align: top; 

    } 

    #buttonDiv { 
     display: inline-block; 
    } 

    #togglesDiv { 
     display: inline-block; 
     margin: 0 auto; 
    } 

    .toggles li { 
     list-style: none; 
     float: left; 
     padding-left: 5px; 
    } 

HTML:

<div id="wrapper"> 

    <div id="menuBar"> 

     <div id="logo">CodePlayer</div> 

     <ul class="toggles"> 
      <li>HTML</li> 
      <li>CSS</li> 
      <li>JS</li> 
      <li>Result</li> 
     </ul> 

     <div id="buttonDiv"> 

      <button id="runButton">Run</button> 

     </div> 


    </div> 

</div> 

Answer 1

использование display: table

*{ 
 
    padding: 0; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
 
      font-weight: 300; 
 
     } 
 

 

 
     #menuBar { 
 
      width: 100%; 
 
      height: 2.5em; 
 
      background-color: #E6E6E6; 
 
      display: table;  
 
     } 
 

 
#logo, 
 
#buttonDiv, 
 
.toggles{ 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    width: 25%; 
 
} 
 
     #logo { 
 
      font-weight: bold; 
 
      font-size: 1em; 
 
      font-family: helvetica;    
 
     } 
 

 
     #buttonDiv { 
 
      text-align: right; 
 
     } 
 
     
 
.toggles{ 
 
    text-align: center; 
 
    width: 50%; 
 
    background: #ddd; 
 
} 
 
     .toggles li { 
 
     list-style: none; 
 
      display: inline-block;  
 
      vertical-align: middle; 
 
      padding: 0 5px; 
 
     }

<div id="wrapper"> 
 

 
     <div id="menuBar"> 
 

 
      <div id="logo">CodePlayer</div> 
 
      
 
      <ul class="toggles"> 
 
       <li>HTML 
 
       <li>CSS 
 
       <li>JS 
 
       <li>Result 
 
      </ul> 
 
      
 
      <div id="buttonDiv"> 
 
      
 
       <button id="runButton">Run</button> 
 
      
 
      </div> 
 

 

 
     </div> 
 

 
    </div>

Answer 2

Вместо использования inline-block стиль, стиль div элементы в #menuBar ид как table-cells и они будут позиционировать равномерно по всей ширине.

Updated Fiddle

Вот крупное обновление:

#menuBar { 
    display:table; 
    width: 100%; 
    height: 2.5em; 
    background-color: #E6E6E6; 
} 
#menuBar div { 
    display:table-cell; /* Maintains the spacing across the width */ 
} 

Answer 3

Ok, поэтому я изменил немного вашего HTML-структуры (только добавил обертку div#nav обернуть клевант)

Я внесли следующие изменения (прокомментировал) в CSS

#logo { 
    font-weight: bold; 
    font-size: 1em; 
    font-family: helvetica; 
    float: left; /* Added */ 
    padding: 10px 0 0 10px; /* Replaced your margin with padding */ 
    width: 33.33333333%; /* Added */ 
} 
/* Wrapper for your toggles */ 
#nav { 
    float: left; 
    width:33.33333333%; 
    text-align: center; 
} 

#buttonDiv { 
    float: left; /* Added */ 
    width:33.33333333%; /* Added */ 
    text-align: right; /* Added */ 
    padding: 10px 10px 0 0px; /* Added */ 
} 

И я также редактировал некоторые CSS для тумблеров <li> элементы

.toggles li { 
    list-style: none; 
    padding-left: 5px; 
    display: inline-block; /* Added */ 
} 

Fiddle