web-dev-qa-db-ja.com

スパン間のスペースを取り除く

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>s）、しかしそれは同じですが、その間のスペースのみが小さくなっています。

htmlcsspadding
38
opensas

スパン間の改行を削除します。例：

<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ではスペースとしてカウントされます。

50
njbair

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>
58
Nikola K.

もう1つのオプションは、負のletter-spacing:-10pxを使用することです。これは、書式設定への影響が軽くなります。

<div id="tabs" style="letter-spacing:-10px;">
    <span id="mytab1" style="letter-spacing:1px;">Tab 1</span>
    <span id="mytab2" style="letter-spacing:1px;">Tab 2</span>
    <span id="mytab3" style="letter-spacing:1px;">Tab 3</span>
</div>

この答え のおかげでこのアイデアを得ました

1
CodeGust

画像なしでテストするのは難しいですが、ルートタブに背景色と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>
0
Cheddar

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

0
BigChrisDiD

njbairの応答は正しいです。

別のオプションは、border-collapse: collapse;プロパティ。

もう1つの問題：Internet Explorer 6.0では、最初のアプローチ（スパン）が期待どおりに機能しません。ウィンドウのサイズを変更するとき、IEワードラップしてタブを壊しますが、テーブルアプローチではIEはタブ全体を送ります。

0
opensas