如何將div放置在導航欄中間？

最終目標是在最左邊放置「CodePlayer」，在中間放置.toggles ul（「HTML/CSS/JS/Result」）和「運行」按鈕最右邊。如何將div放置在導航欄中間？

我的教練總是讓我們使用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>

來源

2015-05-13 mellamojoe

使用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>

來源

2015-05-13 19:25:57 Dmitriy

這正是我一直在尋找。非常感謝！你是唯一一個完全按照我想讓它出現的方式得到的人。 – mellamojoe

而不是使用inline-block造型，風格#menuBar ID內的div元素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 */ 
}

來源

2015-05-13 19:26:39 Brian

好了，我已經改了一下你的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

來源

2015-05-13 19:32:34

如何將div放置在導航欄中間？

回答

相關問題