42

HTMLでタブバーをエミュレートしようとしています。

各タブの幅をテキストの長さに応じて設定し (つまり固定幅ではありません)、画面の幅を超える場合はワード ラップを使用したいと考えています。

私はほとんどそれを達成しました：

<html>
<head>

<style type="text/css">
    #myTabs .tab {
    float: left;
    }

    #myTabs .tab_middle {
        margin: 0;
        padding: 0;
        border: none;
    background-image:url('images/tabs/tab_middle.png');
    }

    #myTabs .tab_left {
        margin: 0;
        padding: 0;
        border: none;
        background-image:url('images/tabs/tab_left.png');
    }

    #myTabs .tab_right {
        margin: 0;
        padding: 0;
        border: none;
    background-image:url('images/tabs/tab_right.png');
    }

</style>

</head>

<body>

<div id="myTabs">
  <div class='tab'>
        <span class='tab_left'>&nbsp;</span>
        <span class='tab_middle'>very very looong</span>
        <span class='tab_right'>&nbsp;</span>
    </div>
  <div class='tab'>
        <span class='tab_left'>&nbsp;</span>
        <span class='tab_middle'>another loooong tab</span>
        <span class='tab_right'>&nbsp;</span>
    </div>
    <div style='clear:both'></div>
</div>

</body>
</html>

しかし、開始タブの画像と終了タブの画像の間に非常に迷惑なスペースがあります。

ご覧のとおり、パディング、スペーシング、ボーダーを試してみましたが、うまくいきませんでした。

編集：
スパンを小さなテーブル（1行、3<td>秒）に置き換えてみましたが、同じで、間のスペースだけが小さくなっています。

4

6 に答える 6

60

njbair以外の別の方法はfont-size: 0、親要素に追加することです。タブのデザインが美的に優れているので、私はこれを好みます。

これの代わりに：

<div id="tabs">
    <span id="mytab1">Tab 1</span><span id="mytab2">Tab 2</span><span id="mytab3">Tab 3</span>
</div>

...これを使用できます：

<div id="tabs" style="font-size: 0;">
    <span id="mytab1">Tab 1</span>
    <span id="mytab2">Tab 2</span>
    <span id="mytab3">Tab 3</span>
</div>

...どちらが良く見えます:)

もちろん、タブの実際のフォント サイズを定義することを忘れないでください。

編集:
スペースを取り除くもう 1 つの方法があります: コメントを追加することです。

例：

<div id="tabs">
    <span id="mytab1">Tab 1</span><!--
    --><span id="mytab2">Tab 2</span><!--
    --><span id="mytab3">Tab 3</span>
</div>
于 2012-07-11T10:31:09.537 に答える
55

スパン間の改行を取り除きます。例：

<div class='tab'>
  <span class='tab_left'>&nbsp;</span><span class='tab_middle'>very very looong</span><span class='tab_right'>&nbsp;</span>
</div>

HTML では、改行はスペースとしてカウントされます。

于 2010-03-25T22:38:03.823 に答える
0

njbair の応答は正しいです。

別のオプションは、border-collapse: collapse;プロパティでテーブルを使用することでした。

別の問題: Internet Explorer 6.0 では、最初のアプローチ (スパン) が期待どおりに機能しません。ウィンドウのサイズを変更すると、IEはスパンをワードラップしてタブを分割しますが、テーブルアプローチではIEでもタブ全体を送信します。

于 2010-03-25T22:56:21.130 に答える
0

タブの中央、左、右も左にフロートする必要があります。

于 2010-03-25T22:46:54.613 に答える
0

画像なしでテストするのは難しいですが、ルート タブに背景色と display:inline を追加しました。これを試してください：

<html>
<head>

<style type="text/css">
    #myTabs .tab {
        float: left;
        display:inline;
    }

    #myTabs .tab_middle {
        margin: 0;
        padding: 0;
        border: none;
    background-image:url('images/tabs/tab_middle.png');
    }

    #myTabs .tab_left {
        margin: 0;
        padding: 0;
        border: none;
        background-image:url('images/tabs/tab_left.png');
    }

    #myTabs .tab_right {
        margin: 0;
        padding: 0;
        border: none;
    background-image:url('images/tabs/tab_right.png');
    }

</style>

</head>

<body>

<div id="myTabs">
  <div class='tab' style="background-color:Red;">
        <span class='tab_left'>&nbsp;</span>
        <span class='tab_middle'>very very looong</span>
        <span class='tab_right'>&nbsp;</span>
    </div>
  <div class='tab' style="background-color:Green;">
        <span class='tab_left'>&nbsp;</span>
        <span class='tab_middle'>another loooong tab</span>
        <span class='tab_right'>&nbsp;</span>
    </div>
    <div style='clear:both'></div>
</div>

</body>
</html>
于 2010-03-25T22:41:15.550 に答える