2016-01-06 11 views
0

我想做一個列表水平顯示與右邊1px的邊界除了最後一個。出於某種原因,在Chrome上底部有一點空白,但它不會顯示在Firefox上。但在Firefox上,右側(最後一個元素)沒有顯示在鑲邊上。任何想法可能是什麼?老實說,我無法找到它,我一直在試圖解決這一問題,現在一會兒..奇怪的填充/頁邊距顯示在Firefox /鉻

body { 
 
    font-family: "HelveticaNeue-Light", "Helvetica neue Light", sans-serif; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#menuBar { 
 
    width: 100%; 
 
    height: 40px; 
 
    background-color: #e0e0e0; 
 
    border-bottom: 1px solid grey; 
 
} 
 
#logo { 
 
    padding: 5px 0 0 20px; 
 
    font-weight: bold; 
 
    font-size: 120%; 
 
    float: left; 
 
} 
 
#buttonDiv { 
 
    float: right; 
 
    padding: 5px 10px 0 0; 
 
} 
 
#runButton { 
 
    font-size: 120%; 
 
} 
 
#toggles { 
 
    width: 256px; 
 
    margin: 0 auto; 
 
    list-style: none; 
 
    padding: 0; 
 
    height: 29px; 
 
    border: 1px solid grey; 
 
    position: relative; 
 
    top: 5px; 
 
} 
 
#toggles li { 
 
    float: left; 
 
    border-right: 1px solid grey; 
 
    padding: 5px 7px; 
 
} 
 
li:hover { 
 
    background-color: blue; 
 
} 
 
.selected { 
 
    background-color: green; 
 
}
<body> 
 

 
    <div id="wrapper"> 
 

 
    <div id="menuBar"> 
 

 
     <div id="logo"> 
 
     Website Visualizer 
 
     </div> 
 

 
     <div id="buttonDiv"> 
 

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

 
     </div> 
 

 
     <ul id="toggles"> 
 

 
     <li class="toggle selected">HTML</li> 
 
     <li class="toggle ">CSS</li> 
 
     <li class="toggle ">JavaScript</li> 
 
     <li class="toggle selected" style="border:none">Result</li> 
 

 
     </ul> 
 

 
    </div> 
 
    </div>

編輯:嘿,大家好我固定它。所以基本上我刪除了UL元素的邊框,並在每個單獨的li元素周圍添加了一個邊框。

+0

嘗試添加'* {box-sizing:border-box; ''到你的CSS。 – divy3993

+0

嘗試在項目列表中使用'display:inline-block;'。 –

+0

將box-sizing:border-box添加到我的li元素並且它仍然是相同的。我也嘗試過整個ul div,但它也一樣。內聯塊也不起作用。 – user5753365

回答

0

在您#toggles刪除:

#toggles { 
    /*width: 256px;*/ 
    margin: 0 auto; 
    list-style: none; 
    padding: 0; 
    height: 29px; 
    border: 1px solid grey; 
    position: relative; 
    top: 5px; 
} 
+0

你的問題是因爲固定的寬度。 –

0

您需要更改#toggles您的代碼如下:

#toggles { 
    /* width: 256px; */ 
    margin: 0 auto; 
    list-style: none; 
    padding: 0; 
    height: 29px; 
    border: 1px solid grey; 
    position: relative; 
    top: 5px; 
} 

通過在容器上取出寬度,您確保的寬度容器等於其子女的所有寬度的總和。

然後更改您的#toggles li定義如下:

#toggles li { 
    float: left; 
    border-right: 1px solid grey; 
    padding: 0 7px; 
    line-height: 29px; 
} 

line-height設置爲容器的高度,你要確保孩子會佔據整個垂直空間,同時垂直對齊文本(如果你不」你也可以設置height: 100%;