如何使固定像素空間的100％按鈕

UI看起來像這樣....

---------------- width 100%-------------------------------------------------------- 
btn1(100%) | space(5pixel fixed) | btn2(100%) | space(5pixel fixed) | btn(100%) 
----------------------------------------------------------------------------------- 


<ul class="wrapper"> 
    <li><a href="#" class="btn"></a></li> 
    <li><a href="#" class="btn"></a></li> 
    <li><a href="#" class="btn"></a></li> 
</ul>

來源

2013-05-30 user1833620

在下面找到更新的解決方案 - @ user1833620 – Nitesh

Working jsFiddle Demo

如果你在你的導航只有按鈕，這個CSS將幫助：

.wrapper { 
    width: 100%; 
} 

.wrapper li { 
    position: relative; 
    background: orange; 
    width: 33%; 
    float: left; 
} 

.wrapper li + li { width: 34%; } 
.wrapper li + li + li { width: 33%; } 

.wrapper li a { 
    display: block; 
    text-align: center; 
} 

.wrapper li + li:before { 
    position: absolute; 
    content: ''; 
    width: 5px; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    background: #fff; 
}

這裏是輸出：

enter image description here

來源

2013-05-30 06:16:49

太棒了：D +1 ... –

@ Mr.Alien謝謝';）'。 – 2013-05-30 06:22:16

太棒了!!謝謝 – user1833620

從您提供的作爲它應該如何看顯示器的用戶界面，這裏是同一個Working Solution。

的HTML：

<ul class="wrapper"> 
    <li><a href="#" class="btn">abc</a></li> 
    <li><a href="#" class="btn">def</a></li> 
    <li><a href="#" class="btn">ghi</a></li> 
</ul>

的CSS：

body{margin:0; padding:0;} 
.wrapper{display:table; width:100%; margin:0; padding:0;} 
.wrapper li{display:table-cell; list-style-type:none; background:#cccccc; border-right:5px solid #ffffff;} 
.wrapper li:last-child{border:none;} 
.wrapper li a{display:block; text-align:center;}

當父寬度是100%，子元素可以相應地適應寬度如果包裝是具有display:table;和兒童有display:table-cell;。

編輯

對於需要額外的空間爲5px，只是增加了一個右邊框上沒有滑塊或縮放拉伸扭曲的佈局。因爲我建議不要爲li放置任何寬度，並讓它們適應自己佔據父寬度。希望這有助於現在。

希望這會有所幫助。

來源

2013-05-30 05:51:15 Nitesh

相同的解決方案，它只是你錯過了5像素寬間距;） –

是啊，我張貼我的答案，看到一個新的答案，看到你的。 - @ Mr.Alien – Nitesh

很多更新。 - @ Mr.Alien – Nitesh

試試這個（Demo）：

ul { 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    list-style: none; 

    /* flexbox setup */ 
    display: -webkit-box; 
    -webkit-box-orient: horizontal; 

    display: -moz-box; 
    -moz-box-orient: horizontal; 

    display: box; 
    box-orient: horizontal; 
} 

li { 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    box-flex: 1; 

    margin-right: 5px; 
    padding: 0; 
    background: #eee; 
    text-align: center; 
} 

li:last-child { 
    margin-right: 0; 
}

來源

2013-05-30 06:33:42 Justineo

哇好代碼.... – user1833620

如何使固定像素空間的100％按鈕

回答

相關問題