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

Question

如何使用按钮（宽度 100%）制作流畅的布局 css？

用户界面看起来像这样......

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

工作 jsFiddle 演示

如果您的导航中只有三个按钮，则此 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 2

从您提供的 UI 显示它的外观，这里有一个相同的工作解决方案。

的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%时，如果 wrapper 具有 adisplay:table;并且子元素具有 ，则子元素可以相应地适应宽度display:table-cell;。

编辑

对于所需的额外 5px 空间，只需添加一个右边框，而不会扭曲滑块上的布局或缩放拉伸。正如我建议不要为 放置任何宽度li并让它们适应自己以占据父宽度。希望这对现在有所帮助。

希望这可以帮助。

Answer 3

试试这个（演示）：

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