7

CSS を使用して、いくつかのラジオ ボタンをタブとしてスタイル設定しています。「選択した」タブのフォントの太さを太字にしたいと思います。もちろん、これにより、テキストがより多くのスペースを占めるため、タブのサイズが大きくなります。「タブ」のサイズを変更せずに、テキストを太字から非太字にする方法を見つけたい

タブ 1 が選択されました

タブ 2 が選択されました

固定幅を設定する以外に、テキストを実際に太字にせずに、太字のテキストのサイズを占める巧妙でクリーンな方法はありますか?

私が考えることができる唯一の方法は、太字のテキストを存在させることです（テキストがHTMLに2回存在する原因になります）が、visibility: hidden.

マークアップ:

<label class="tab active"><input type="radio" name="someTabs" value="someValueA" />Tab 1</label>
<label class="tab"><input type="radio" name="someTabs" value="someValueB" />Tab 2 (with longer text)</label>

現在の関連 CSS:

.tab {
  display: block;
  font-size: 1.2em;
  height: 2em;
  line-height: 2em;
  margin-right: 1px;
  padding: 0 2em;
  position: relative;
  text-align: center;
  float: left;
}
.tab.active,
.tab:hover {
  font-weight: bold;
}
.tab input[type=radio] {
  display: none;
}
4

2 に答える 2

2

ゴースト要素を使用した解決策もあります。表示されている領域の下にある太字のスタイルで同じテキストを使用するだけです。

HTML:

<div class="link">
    <div class="text">Sample Text</div>
    <div class="ghost">Sample Text</div>
</div>

CSS:

.link {
    border: 1px #000 solid;
    display: inline-block;
}

.link .ghost {
    color: transparent;
    font-weight: bold;
}

.link .text {
    position: absolute;
    text-align: center;
}

.link .text:hover {
    font-weight: bold;
}

これを確認するためのjsFiddleを次に示します。

唯一の注意点は、表示されるテキストが外側の div の中央に配置されていないことです。多分誰かがここから拾うことができます?!

于 2013-02-15T17:21:07.640 に答える
1

cssはletter-spacingどうですか？結果は、目的の結果に近くなります。

.tab
{
    letter-spacing: 1.5px;
}

.tab.active, .tab:hover 
{
    letter-spacing: normal;
}

jsfiddleの例

于 2013-02-15T17:03:49.270 に答える