列出的按钮会扩展填充或宽度，以填满父级div的宽度。

Question

我想要扩展列出的button的填充或宽度，以填满其父级div。由于button的数量是随机且未知的，因此无法使用百分比。

请检查这个fiddle。

<div class="btn-group btn-group-normal" >
    <ul class="btn-ul" >
        <li><a class="btn-white" href="#" >Button Left</a></li>
        <li><a class="btn-white" href="#" >Button Middle</a></li>
        <li><a class="btn-white" href="#" >Button Middle 2</a></li>
        <li><a class="btn-white" href="#" >Button Right</a></li>
    </ul>
</div>

- Archie Zineg

Answer 1

将LI元素的display属性设置为table-cell，并移除它们的float属性。

.btn-ul li{
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
    outline: none;
    display: table-cell;
}

http://jsfiddle.net/v5su3dL1/5/

- pavel

Answer 2

为 .btn-ul li 类添加 display: table-cell; 并移除 float: left;

.btn-group{
 display: table;
 width: 500px;
 border: 1px solid #000;
 box-sizing: border-box;
}
.btn-group a{
 display: block;
}
.btn-group-normal a{
 padding: 5px 15px;
 font: normal 14px Tahoma, Geneva, sans-serif;
}

.btn-ul{
 width: 100%;
 padding: 0;
 margin: 0;
 list-style: none;
 *border: 1px solid #000;
 display: table;
}
.btn-ul li{
 font-family: Arial, Helvetica, sans-serif;
 cursor: pointer;
 outline: none;
 
    display: table-cell;
}
.btn-ul li a{
 text-decoration: none;
}
.btn-ul li:first-child a{
 border-top-left-radius: 5px;
 border-bottom-left-radius: 5px;
}
.btn-ul li:last-child a{
 border-top-right-radius: 5px;
 border-bottom-right-radius: 5px;
}
.btn-ul li:not(:first-child):not(:last-child) a{
 margin: 0 -1px 0 -1px;
}
.btn-white{
    background-color: #FFF;
    color: #333;
    border: 1px solid #d0d0d0;
}

<div class="btn-group btn-group-normal" >
    <ul class="btn-ul" >
        <li><a class="btn-white" href="#" >Button Left</a></li>
        <li><a class="btn-white" href="#" >Button Middle</a></li>
        <li><a class="btn-white" href="#" >Button Right</a></li>
         <li><a class="btn-white" href="#" >more Button</a></li>
    </ul>
</div>

jsfiddle demo http://jsfiddle.net/v5su3dL1/7/

- Alien

Answer 3

.btn-ul li{
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
outline: none;
float: left;
width:33%;

}

你可以通过改变百分比来调整宽度，也可以使用类 li:first-child first。

- Deepak Shinde