Menu icon Foundation
Button-Group even-Statement

Hello

Is there any possibilty, that the button-group is stretched in a column? I tried the even-5 statement. It does work but i have a margin on the right and left side. How can I avoid the margin? I want that the button group has the whole width of the column.

Best regards

<div class="row">
    <div class="small-12 large-12 column">
		<ul class="button-group radius even-5">
			<li><a href="#" class="button ">Startseite</a> </li>
			<li><a href="#" class="button">Studio</a> </li>
			<li><a href="#" class="button">Angebot</a> </li>
			<li><a href="#" class="button">Produkte</a> </li>
    		<li><a href="#" class="button">Kontakt</a> </li>
		</ul>
	</div>
</div>
            

         

button-groupevenStretchedfull width

Hello

Is there any possibilty, that the button-group is stretched in a column? I tried the even-5 statement. It does work but i have a margin on the right and left side. How can I avoid the margin? I want that the button group has the whole width of the column.

Best regards

<div class="row">
    <div class="small-12 large-12 column">
		<ul class="button-group radius even-5">
			<li><a href="#" class="button ">Startseite</a> </li>
			<li><a href="#" class="button">Studio</a> </li>
			<li><a href="#" class="button">Angebot</a> </li>
			<li><a href="#" class="button">Produkte</a> </li>
    		<li><a href="#" class="button">Kontakt</a> </li>
		</ul>
	</div>
</div>
            

         

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

There is no margin but columns have padding. If you want to remove the padding you can simply add the collapse class

<div class="row collapse">

http://codepen.io/rafibomb/pen/jPOqZO?editors=110