demo

Question

如何在CSS3中均匀分配菜单标签。有三个标签和一个标签，标签2和标签3之间有明显较大的间隙，而不是标签一和两个？

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

或浮动列表项。没有太大的变化：

.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或left: 0获取第一个right，第三个位于50% - (31.2% / 2) = 50% - 15.6% = 34.%，第二个位于left right或left: 34.4% }（.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; }）。

demo

第一种方法

CSS 更改：

{{1}}

Answer 2

你的CSS中有这个：



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

如果您的容器比带有边距的3个选项卡宽，那么它将仅显示更大的间隙。不要将它漂浮到右边 - 而是将它们全部保留在左边，并计算出这些的盒子模型大小并进行数学运算或使用box-sizing：border-box和33％宽度的标签。不过要小心，因为边框不包括在框大小的边框和填充中，所以减少到30％是安全的。

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

2 个答案:

demo

demo