1

私はこのCSSコードを持っています:

 .tab-box {
    border-bottom: 1px solid #666666;
    padding-bottom:5px;
 }

.tab-box a {
  border:1px solid #666666;
  color:#FFFFFF;
  padding: 0 5px 0 5px;
  text-decoration:none;
  background-color: #eee;
  background:#666666;
  color:#FFFFFF;
 }

.tab-box a.activeLink { 
  background-color: #eeeeee;
  color:#666666;
  border-bottom: 0; 
  padding: 5px 15px;
 }

.tabcontent {
    padding: 5px;
    width: 99%;
 }

.hide { display: none;}

.small { 
    color: #999; 
    margin-top: 100px; 
    border: 1px solid #EEE; 
    padding: 5px; 
    font-size: 9px; 
    font-family:Calibri; 
}

リンクに余白を追加しようとしています。

に追加しようとしましたが、追加margin-top:30px;され.tab-box aません。

タブが互いに下に移動したときにタブ全体が画面幅よりも大きい場合、それらが重ならないようにする必要があります。

これは完全なコードのフィドルですhttp://jsfiddle.net/5rZP8/

4

5 に答える 5

3

aの子である要素に適用していました.tabLink。

a代わりに、 class を含む要素に適用して.tabLinkください。

a.tabLink {
    margin-top: 30px;
}

jsFiddle の例- 動作します。

display:inline-blockさらに、マージンを有効にするために追加する必要もあります。

于 2013-11-01T20:39:48.527 に答える
1

a要素はデフォルトでインラインとして表示されます。したがって、マージンを有効にするには、これが必要です。

このようにして、ブラウザーはマージンとパディングの属性をアンカーに適用します。

http://jsfiddle.net/5rZP8/6/

動作確認できるように更新しました。

.tabLink {
    margin-top:30px;
    display:inline-block;
}
于 2013-11-01T20:44:48.280 に答える
0

コードが機能するには、リンクがブロック要素である必要があります。これを使用して、他のスタイルを維持しながらブロック レベル要素を作成します。 

.tab-box a { display: inline-block': }

リンクがブロック要素になると、div が展開されてそれらを埋めます。したがって、次のように簡単に追加できます。

.tab-box { margin-top: 30px; }
于 2013-11-01T20:42:58.997 に答える
0

この質問に対する受け入れられた回答を参照してください: display:inline with margin, padding, width, height。リンクaはインライン HTML 要素であり、CSSdisplay: inlineではデフォルトで表示されます。プロパティの値がdisplay異なると、レンダリングも異なります。

抜粋：

完全な説明については、CSS 仕様の「インライン フォーマット コンテキスト」を参照してください。

于 2013-11-01T20:38:45.623 に答える
0

インライン要素はマージンではうまく機能しません。追加display: inline-block;はうまくいくようです：

.tab-box a {
  border:1px solid #666666;
  color:#FFFFFF;
  padding: 0 5px 0 5px;
  text-decoration:none;
  background-color: #eee;
  background:#666666;
  color:#FFFFFF;

  display: inline-block;
  margin-top: 30px;
}

フィドルを参照してください: http://jsfiddle.net/5rZP8/2/

于 2013-11-01T20:39:42.213 に答える