如何在CSS3中均勻分配菜單選項卡。有三個選項卡和一個選項卡，選項卡兩和三之間的間距明顯更大，比選項卡一和選項二更大？在CSS3中均勻分配菜單選項卡

align top http://www.kerrydeaf.com/tabs_uneven.png

ul.tabsmenu{ padding:5px 0 0 0; position:relative; bottom:-1px;} 
    ul.tabsmenu li a{ width:31.2%; float:left; padding:12px 0 12px 0; margin:0 2% 0 0;color:#000000;text-align:center; 
    -moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;-khtml-border-top-left-radius:5px; 
    -moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;-khtml-border-top-right-radius:5px; 
    background:-moz-linear-gradient(top, #ececec 0%, #ffffff 100%);background: 
    -webkit gradient(linear, 0% 0%, 0% 100%, from(#ececec), to(#ffffff)); } 
    ul.tabsmenu li:last-child a{ float:right; margin:0 0 0 0;} 
    ul.tabsmenu li.active a{border-bottom-color:#fff; color:#48c4d2; 
    font-weight:bold; background: -moz-linear-gradient(top, #e4f6f8 0%, #ffffff 100%);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e4f6f8), to(#ffffff)); } 
    .tabcontent{ padding:5% 4%; clear:both; border:1px #bfeaf0 solid; margin:0 0 15px 0; /* ddd darker grey. border:1px #bfeaf0 solid; */ 
    -moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;-khtml-border-bottom-left-radius:5px; 
    -moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;-khtml-border-bottom-right-radius:5px;

}

來源

2012-09-17 Irishgirl

-khtml是爲了什麼？ –

@IlanBiala - Konqueror和任何其他使用KHTML佈局引擎（這是Webkit的起源地）的瀏覽器。 – 0b10011

我不認爲任何人使用khtml ....從來沒有在大多數開發人員代碼中看到它，例如Chris Coyier和Lea Verou。 –

使用inline-block列表項，並設置所有的左邊界，但第一個。左邊距將有(100% - 3*31.2%)/2 = (100% - 93.6%)/2 = 6.4%/2 = 3.2%

demo

<ul class='tabsmenu'> 
    <li><a href='#'>Tab one</a></li> 
    <li><a href='#'>Tab two</a></li> 
    <li class='active'><a href='#'>Tab three</a></li> 
</ul> 
<ul class='tabcontent'> 
    <li><!-- content--></li> 
    <li><!-- content--></li> 
    <li><!-- content--></li> 
</ul>

CSS值：

.tabsmenu{ 
    padding: 0; 
    margin: 0 0 -1px; 
    list-style: none; 
    text-align: center; 
} 
.tabsmenu li { 
    box-sizing: border-box; 
    display: inline-block; 
    width: 31.2%; 
    border-radius: 5px 5px 0 0; 
    background: linear-gradient(#ececec, #fff); 
} 
.tabsmenu li:not(:first-child) { margin-left: 3.2%; } 
.tabsmenu li.active { 
    border: solid 1px #bfeaf0; 
    border-bottom: solid 1px #fff; 
    background: linear-gradient(#e4f6f8, #fff); 
    font-weight: bold; 
} 
.tabsmenu a { 
    display: block; 
    padding: 12px 0 12px 0; 
    color: #000; 
    text-decoration: none; 
} 
.tabsmenu li.active a { color:#48c4d2; } 
.tabcontent{ 
    padding: 5% 4%; 
    border: solid 1px #bfeaf0; 
    border-radius: 0 0 5px 5px; 
    margin: 0 0 15px 0; 
}

或浮動的列表項。沒有太大的變化：

.tabsmenu{ 
    overflow: hidden; 
    padding: 0; 
    margin: 0 0 -1px; 
    list-style: none; 
    text-align: center; 
} 
.tabsmenu li { 
    box-sizing: border-box; 
    float: left; 
    width: 31.2%; 
    border-radius: 5px 5px 0 0; 
    background: linear-gradient(#ececec, #fff); 
}

或者使用絕對定位。既然你有每個的寬度，那麼你可以很容易地絕對定位它們。請從left或right（left: 34.4%）的left（left: 0）處得到第一個，在right處得到第三個，在50% - (31.2%/2) = 50% - 15.6% = 34.%處得到第二個。

demo

CSS變化WRT第一種方法：

.tabsmenu{ 
    position: relative; 
    height: 28px; 
    list-style: none; 
    text-align: center; 
} 
.tabsmenu li { 
    position: absolute; 
    width: 31.2%; 
    border-radius: 5px 5px 0 0; 
    background: linear-gradient(#ececec, #fff); 
} 
.tabsmenu li:first-child { left: 0; } 
.tabsmenu li:nth-child(2) { left: 34.4%; } 
.tabsmenu li:last-child { right: 0; }

來源

2012-09-17 23:41:06 Ana

@joshnh：好的，你如何建議平均分配標籤菜單？請在代碼中？ – Irishgirl

像這個http://codepen.io/thebabydino/pen/gwJEj with'inline-block'，我同意這是更好的解決方案。我只是去絕對定位，因爲我在他們的父母身上看到了'position：relative'。 – Ana

你在你的CSS有這樣的：


 
    ul.tabsmenu li:last-child a{ float:right; margin:0 0 0 0;}

如果容器比3卡口與邊緣更寬那麼它將只顯示這一個更大的差距。不要把它漂浮在右邊 - 而是把它們全部留下來，並計算出它們的框模型大小，然後進行數學運算或使用框尺寸：邊框和33％的寬度。請注意，由於邊距不包括在只包含邊框和邊框的邊框中，因此減少到30％是安全的。

來源

2012-09-21 15:59:20

在CSS3中均勻分配菜單選項卡

回答

demo

demo

相關問題