李寬度不與父母UL標記固定

我已經檢查了一些我開發的網頁。有一些css問題的寬度爲li。李寬度不與父母UL標記固定

下面是導航菜單代碼：

ul.tabs { 
 
    padding: 0px; 
 
    list-style: none; 
 
    background: transparent; 
 
    border-bottom: 3px solid #ff6600; 
 
    -moz-border-radius: 0px; 
 
    -webkit-border-radius: 0px; 
 
    border-radius: 0px; 
 
    text-align: center; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
ul.tabs li { 
 
    background-color: #ff6600; 
 
    border-top-left-radius: 5px; 
 
    border-top-right-radius: 5px; 
 
    border: none; 
 
    color: #f5ede3; 
 
    display: inline-block; 
 
    padding: 5px 15px; 
 
    cursor: pointer; 
 
    margin-left: 0px; 
 
    width: 16%; 
 
    text-align: center; 
 
} 
 
ul.tabs li.current { 
 
    background: #f5ede3; 
 
    color: #ff6600; 
 
}

<ul class="tabs"> 
 
    <li data-tab="tabs-1" class="current">Amenities</li> 
 
    <li data-tab="tabs-5">Attractions</li> 
 
    <li data-tab="tabs-2">Rates</li> 
 
    <li data-tab="tabs-6">Calendar</li> 
 
    <li data-tab="tabs-4">Reviews</li> 
 
    <li data-tab="tabs-3">Inquire</li> 
 
</ul>

但我得到以下結果：

的li標籤的寬度爲16 ％。並且li的數量爲6.爲什麼li標籤的總寬度大於ul寬度？

來源

2016-12-22 Andrew Li

填充，保證金......？你有6個元素，至少有30px填充，180px必須剩餘4％以上） – Georgy

你可能需要設置你的方塊大小https://developer.mozilla.org/en-US/docs/Web/CSS/box-尺寸 – Benneb10

我已經設置了箱子大小，但那不太好。 –

設置box-sizing: border-box全球作爲速戰速決 - 見下面的演示：

*{ 
 
    box-sizing: border-box; 
 
} 
 
ul.tabs { 
 
    padding: 0px; 
 
    list-style: none; 
 
    background: transparent; 
 
    border-bottom: 3px solid #ff6600; 
 
    -moz-border-radius: 0px; 
 
    -webkit-border-radius: 0px; 
 
    border-radius: 0px; 
 
    text-align: center; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
ul.tabs li { 
 
    background-color: #ff6600; 
 
    border-top-left-radius: 5px; 
 
    border-top-right-radius: 5px; 
 
    border: none; 
 
    color: #f5ede3; 
 
    display: inline-block; 
 
    padding: 5px 15px; 
 
    cursor: pointer; 
 
    margin-left: 0px; 
 
    width: 16%; 
 
    text-align: center; 
 
} 
 
ul.tabs li.current { 
 
    background: #f5ede3; 
 
    color: #ff6600; 
 
}

<ul class="tabs"> 
 
    <li data-tab="tabs-1" class="current">Amenities</li> 
 
    <li data-tab="tabs-5">Attractions</li> 
 
    <li data-tab="tabs-2">Rates</li> 
 
    <li data-tab="tabs-6">Calendar</li> 
 
    <li data-tab="tabs-4">Reviews</li> 
 
    <li data-tab="tabs-3">Inquire</li> 
 
</ul>

來源

2016-12-22 17:06:26 kukkuz

有了這個應該工作：

ul.tabs li{ 
     background-color: #ff6600; 
     border-top-left-radius:5px; 
     border-top-right-radius:5px; 
     border:none; 
     color: #f5ede3; 
     display: inline-block; 
     padding: 5px 15px; 
     cursor: pointer; 
     margin-left:0px; 
     width:16%; 
     text-align:center; 
     box-sizing: border-box;// Try adding this line (: 
    }

來源

2016-12-22 17:10:27 user5195185

盒子尺寸適合我。 –

李寬度不與父母UL標記固定

回答

相關問題