列出的按钮展开填充或宽度以填充父divs宽度

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>

Answer 1

将display: table-cell设置为LI并将其删除float。

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

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

Answer 2

添加display: table-cell;并删除float: left;

的.btn-ul li

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

Answer 3

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

}

您可以通过更改百分比来调整宽度，或者您也可以使用类li：first-child first。