Menu icon Foundation

Coder

My Posts

  • 1
    Reply
  • button group align

    By Hilal Al-Harthy

    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 ... (continued)

    Last Reply by Hilal Al-Harthy almost 5 years ago


My Comments

Hilal Al-Harthy commented on Hilal Al-Harthy's post almost 5 years

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>

Posts Followed

No Content

Following

    No Content

Followers

My Posts


My Comments

You commented on Hilal Al-Harthy's post almost 5 years

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>

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content