Menu icon Foundation
button group align

Hi creative minds,

when I use button group, there seem to be 1px misalignment. I did try to change the margin of the 1st element [li] to start in same line as [ul], the last [li] is shifted by 1px.

it the same if i use alone or div or inside div

here is a codepen link. http://codepen.io/anon/pen/MYbEMg and screen shoot in chrome. btw, its same cross all bowers I tried "FF, C and IE 11"

am i missing something or ....?

thanks

<ul class="button-group even-3">
    <li><a href="#" class="button tiny">More</a></li>
	<li><a href="#" class="button tiny">Chart</a></li>
	<li><a href="#" class="button tiny">Wish</a></li>
</ul>

Button group align

button-group

Hi creative minds,

when I use button group, there seem to be 1px misalignment. I did try to change the margin of the 1st element [li] to start in same line as [ul], the last [li] is shifted by 1px.

it the same if i use alone or div or inside div

here is a codepen link. http://codepen.io/anon/pen/MYbEMg and screen shoot in chrome. btw, its same cross all bowers I tried "FF, C and IE 11"

am i missing something or ....?

thanks

<ul class="button-group even-3">
    <li><a href="#" class="button tiny">More</a></li>
	<li><a href="#" class="button tiny">Chart</a></li>
	<li><a href="#" class="button tiny">Wish</a></li>
</ul>

Button group align
Hilal Al-Harthy almost 5 years ago

here is small workaround I came with, hope it do help someone.

ul.button-flex{
      display: -webkit-flex;
      display: -ms-flex;
      display: flex;
      }

    ul.button-flex:before, ul.button-flex:after{
      content:none;
      display: none;
    }
    ul.button-flex > li{
      -webkit-flex: auto;
      -ms-flex: auto;
      flex: auto;
      margin: 0px
      }

    ul.button-flex > li > a{
      display: block;
      padding-left: 0px !important;
      padding-right: 0px !important;
    }
<ul class="button-group button-flex">
          <li><a href="#" class="small button">share</a></li>
          <li><a href="#" class="small button">like</a></li>
          <li><a href="#" class="small button">tweet</a></li>
        </ul>