iphone - 在 CSS3 中均匀分布菜单选项卡

Question

如何在 CSS3 中均匀分布菜单选项卡。有三片和一片，片二和三之间的间隙明显比片一和二大吗？

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

对列表项使用 inline-block 并在除第一个之外的所有项上设置左边距。左边距的值为 (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;
}

---

或者 float 列表项。变化不大:

.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);
}

---

或者使用绝对定位。由于您拥有每个宽度，因此您可以轻松地绝对定位它们。第一个在左边(left: 0)，第三个在右边，第二个在50% - (31.2%/2) = 50% - 15.6% = 34.% 来自 left 或 right (left: 34.4%).

demo

CSS 更改第一种方法:

.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; }