0

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

对齐顶部 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;

}

4

2 回答 2

3

用于inline-block列表项并在除第一个之外的所有项上设置左边距。左边距的值为(100% - 3*31.2%)/2 = (100% - 93.6%)/2 = 6.4%/2 = 3.2%

演示

<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%) 处。

演示

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; }
于 2012-09-17T23:41:06.870 回答
0

你的 CSS 中有这个： 



    ul.tabsmenu li:last-child a{ float:right; 边距：0 0 0 0;}
如果您的容器比带有边距的 3 个选项卡更宽，那么它只会在这个选项卡上显示更大的间隙。不要把它浮动到右边——而是把它们都放在左边，要么计算出这些盒子模型的大小并做数学运算，要么使用 box-sizing:border-box 和 33% 的宽度作为选项卡。注意要小心，因为边距不包括在盒子大小中，只有边框和填充所以减少到说 30% 是安全的。

于 2012-09-21T15:59:20.480 回答