0

CSS3でメニュータブを均等に配置する方法。3 つのタブと 1 つのタブがあり、タブ 1 と 2 よりもタブ 2 と 3 の間のギャップが明らかに広いですか?

上揃え 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);
}

または絶対配置を使用します。それぞれに幅があるので、簡単に絶対に配置できます。1 つ目はleft( left: 0) に、3 つ目は にright、2 つ目はまたは( )50% - (31.2% / 2) = 50% - 15.6% = 34.%のいずれかに配置します。leftrightleft: 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:最後の子 a{ float:right; マージン:0 0 0 0;}
コンテナが余白のある 3 つのタブよりも広い場合、この 1 つのみに大きなギャップが表示されます。これを右にフロートさせないでください - 代わりにそれらをすべて左に保ち、これらのボックスモデルのサイズを計算して数学を実行するか、タブに box-sizing:border-box と 33% の幅を使用します。ただし、マージンはボックスのサイズ設定には含まれず、ボーダーとパディングのみであるため、安全のために 30% まで減らしてください。

于 2012-09-21T15:59:20.480 に答える