在CSS3中平均分配菜单选项卡

Question

How to distribute menu tab evenly in CSS3. There is three tabs and one tab with obvious wider gap between tab two and three, than tab one and two?

align top http://www.kerrydeaf.com/tabs_uneven.png

  ul.tabsmenu{ padding:5px 0 0 0; position:relative; bottom:-1px;}
  ul.tabsmenu li a{ width:31.2%; float:left; padding:12px 0 12px 0; margin:0 2% 0 0;color:#000000;text-align:center; 
  -moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;-khtml-border-top-left-radius:5px;
  -moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;-khtml-border-top-right-radius:5px;
  background:-moz-linear-gradient(top, #ececec 0%, #ffffff 100%);background: 
  -webkit gradient(linear, 0% 0%, 0% 100%, from(#ececec), to(#ffffff)); }
  ul.tabsmenu li:last-child a{ float:right; margin:0 0 0 0;}
  ul.tabsmenu li.active a{border-bottom-color:#fff; color:#48c4d2; 
  font-weight:bold; background: -moz-linear-gradient(top, #e4f6f8 0%, #ffffff 100%);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e4f6f8), to(#ffffff)); }
  .tabcontent{ padding:5% 4%; clear:both; border:1px #bfeaf0 solid; margin:0 0 15px 0; /* ddd darker grey. border:1px #bfeaf0 solid; */
  -moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;-khtml-border-bottom-left-radius:5px;
   -moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;-khtml-border-bottom-right-radius:5px;

}

Answer 1

Using inline-block for the list items and set a left margin on all but the first one. The left margin will have a value of (100% - 3*31.2%)/2 = (100% - 93.6%)/2 = 6.4%/2 = 3.2%

demo

<ul class='tabsmenu'>
  <li><a href='#'>Tab one</a></li>
  <li><a href='#'>Tab two</a></li>
  <li class='active'><a href='#'>Tab three</a></li>
</ul>
<ul class='tabcontent'>
  <li><!-- content--></li>
  <li><!-- content--></li>
  <li><!-- content--></li>
</ul>

CSS :

.tabsmenu{
  padding: 0;
  margin: 0 0 -1px;
  list-style: none;
  text-align: center;
}
.tabsmenu li {
  box-sizing: border-box;
  display: inline-block;
  width: 31.2%;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(#ececec, #fff);
}
.tabsmenu li:not(:first-child) { margin-left: 3.2%; }
.tabsmenu li.active {
  border: solid 1px #bfeaf0;
  border-bottom: solid 1px #fff;
  background: linear-gradient(#e4f6f8, #fff);
  font-weight: bold;
}
.tabsmenu a {
  display: block;
  padding: 12px 0 12px 0;
  color: #000;
  text-decoration: none;
}
.tabsmenu li.active a { color:#48c4d2; }
.tabcontent{
  padding: 5% 4%;
  border: solid 1px #bfeaf0;
  border-radius: 0 0 5px 5px;
  margin: 0 0 15px 0;
}

---

Or floating the list items. Not much changes:

.tabsmenu{
  overflow: hidden;
  padding: 0;
  margin: 0 0 -1px;
  list-style: none;
  text-align: center;
}
.tabsmenu li {
  box-sizing: border-box;
  float: left;
  width: 31.2%;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(#ececec, #fff);
}

---

Or using absolute positioning. Since you have the widths for each, then you can easily absolutely position them. Have the first at the left ( left: 0 ), the third at the right , and the second one at 50% - (31.2% / 2) = 50% - 15.6% = 34.% from either left or right ( left: 34.4% ).

demo

CSS changes wrt the first method:

.tabsmenu{
  position: relative;
  height: 28px;
  list-style: none;
  text-align: center;
}
.tabsmenu li {
  position: absolute;
  width: 31.2%;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(#ececec, #fff);
}
.tabsmenu li:first-child { left: 0; }
.tabsmenu li:nth-child(2) { left: 34.4%; }
.tabsmenu li:last-child { right: 0; }

Answer 2

You have this in your CSS:

    ul.tabsmenu li:last-child a{ float:right; margin:0 0 0 0;}

If your container is wider than the 3 tabs with the margins then it will show a larger gap on this one only. Do not float this to the right - instead keep them all left and either work out the box model size of these and do the Math or use box-sizing:border-box and 33% widths for the tabs. NB be careful though as margins are not included in box-sizing only borders and paddings so reduce down to say 30% to be safe.