是什麼導致我的菜單欄中的「運行」按鈕堆疊？

Question

這讓我覺得這個菜單欄看起來很乾淨，這本身就是一個問題。但是，我認爲它終於會在一起。我現在遇到的問題有三重。

兩個問題：

1. 當這被視爲是全屏幕，菜單欄看起來不錯，但是當你在屏幕關閉「運行」按鈕降至底部。這是什麼造成的？

2. 如何繼續關閉窗口，中間的.toggle列表堆疊在「CodePlayer」標誌之上？我需要做些什麼才能使窗口縮小時，divs達到他們開始重疊並停止的地步？

3. 爲什麼我的菜單中間部分的邊界右邊界和底部邊界之間有一點點間隙？我試過0px填充，它不工作。

http://jsfiddle.net/ow5zq9fL/

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

/*-----------MENU BAR------------*/ 


    #menuBar { 
     height: 40px; 
     background-color: gray; 
     max-width: 100%; 
    } 

/*------LOGO, TOGGLES, BUTTON-----*/ 


    #logo, 
    #buttonDiv, 
    #toggles { 
     vertical-align: middle; 
     display: inline-block; 
     width: 33%; 
     height: 18px; 
    } 

/*-----------LOGO------------*/ 


    #logo { 
     font-weight: bold; 
     font-size: 1em; 
     font-family: helvetica; 
     vertical-align: middle; 
     position: relative; 
     top: 12px; 
     left: 12px; 
/*  background-color: blue; 
*/ 
    } 

/*-----------TOGGLES------------*/ 


    .toggles { 
     text-align: center; 
     border: 1px solid black; 
     height: 20px; 
     position: relative; 
     top: -9px; 
     width: 300px; 
     left: 20px; 
    } 


    .toggles li { 
     list-style: none; 
     display: inline-block; 
     border-right: 1px solid black; 
    } 
/*----------TOGGLES LIST----------*/ 

    #resultList { 
     border-right: none; 
    } 



/*-------------BUTTON------------*/ 


    #buttonDiv { 
     text-align: right; 
     position: relative; 
     top: 8px; 
     right: 12px; 
     vertical-align: middle;  
    } 

/*-----------BUTTON------------*/ 


    #htmlList { 
     padding-right: 20px; 
     margin-left: -20px;  
    } 

    #cssList { 
     padding: 0 25px;  
    } 

    #jsList { 
     padding: 0 25px; 
    } 

    #resultList { 
     padding: 0 20px; 
    } 



</style> 

<div id="wrapper"> 

    <div id="menuBar"> 

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

     <div id="toggles"> 
      <ul class="toggles"> 
       <li id="htmlList">HTML</li> 
       <li id="cssList">CSS</li> 
       <li id="jsList">JS</li> 
       <li id="resultList">Result</li> 
      </ul> 
     </div> 

     <div id="buttonDiv"> 

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

     </div> 


    </div> 

</div> 

Answer 1

嘗試this。我添加了一個包裝並應用從#buttonDiv到.wrapper的所有內容。然後我改變了它，使它居中。

新代碼：

.wrapper { 
    text-align: right; 
    position: relative; 
    bottom: 12px; 
    right: 12px; 
    vertical-align: middle; 
} 

和

<div class="wrapper"> 
     <div id="buttonDiv"> 
      <button id="runButton">Run</button> 
     </div> 
    </div> 

Answer 2

添加float離開

#logo, #buttonDiv, #toggles { 
    ... 
    float: left; 
} 

http://jsfiddle.net/ow5zq9fL/4/