奇怪的填充/頁邊距顯示在Firefox /鉻

我想做一個列表水平顯示與右邊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元素周圍添加了一個邊框。

來源

2016-01-06 user5753365

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

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

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

在您#toggles刪除：

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

來源

2016-01-06 17:07:27

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

您需要更改#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%;）

來源

2016-01-06 17:13:23

奇怪的填充/頁邊距顯示在Firefox /鉻

回答

相關問題