Clever Geek Handbook

Listed buttons expand padding or width to fill width of parent divs

I want to expand the padding or width of the listed ones button

to fill the parent ones div

. button

the number is not randomly known , so you cannot use a percentage.

Please check the script

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


source to share


3 answers


add display: table-cell;

and remove float: left;

for class.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>
Run codeHide result


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

+2


source


Install display: table-cell

in LI

and uninstall them float

.

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


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

+3


source 


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

}

you can adjust the width by changing the percentage or you can also use the li: first-child first class.

0


source






More articles:


All Articles