如何制作具有固定像素空间的100％按钮

Question

如何使用按钮（宽度100％）制作流体布局css？

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> 

Answer 1

从您提供的用户界面显示它应该如何显示的内容，这里有一个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添加任何宽度，让它们适应自己以占用父宽度。希望现在有所帮助。

希望这有帮助。

Answer 2

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;
}

这是输出：

Answer 3

试试这个（ 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;
}