2011-12-15 11 views
4

私は、HTML文書の同じ行にそれらの間にかなりのスペースを入れていくつかのラベルを表示しようとしています。これは動作します。 これをもっとうまく利用するにはどうすればよいですか?css:同じ行の2つのラベルの間にスペースを入れる方法は?

<div> 
firstlabel &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp secondlabel 

</div> 
+0

こんにちは、 ていますが、セミコロンを逃した(;)   –

答えて

12

あなたは、<span>タグであなたの「ラベル」を包む彼らにクラスを与え、そしてCSSでmarginを追加することができます。ここ

例:http://jsfiddle.net/peduarte/Rf5kB/

HTML

<div> 
    <span class="firstLabel">firstlabel</span> 
    <span class="secondLabel">secondlabel</span> 
</div> 

CSS

.firstLabel { 
    margin-right: 50px; 
} 
0

あなたは& NBSPは後にセミコロンを使用する必要があります。

<div> 
firstlabel &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; secondlabel 
</div> 
0

正しい非破壊可能なスペースエンティティが&nbsp;で、あなたが最後にセミコロンを忘れていました(;)。しかし、あなたがしたいことを達成するためのより良い方法は、peduarteのように、firstlabelとsecondlabelを<span>タグに囲み、CSSを使用して別々にすることです。

0

申し訳ありませんが、これはそれを行うための本当に奇妙な方法です。なぜそれらのラベルを<p>-Tagsに置き、マージン、パディングを使って間隔をフォーマットしますか?

1

これを試してみてください:

<div class="main"> 
    <div class="left">firstlabel</div> 
    <div class="right">secondlabel</div> 
</div> 

.main{ 
    width:220px; 
    } 
.left{ 
    width:110px; 
    float:left; 
    text-align:left; 
    } 
.right{ 
    width:110px; 
    float:right; 
    text-align:right; 
    } 
0

それはブラウザに依存して動作するかどうか。正しい記法は&nbsp;で、セミコロン(nyarlathotepのように)です。しかし、ノーブレークスペースはあなたに非常に大雑把な制御を与えます。より良いアプローチは、CSSを使用することです。

<div><span style="padding-right: 5em">firstlabel</span>secondlabel</div> 

コンテキストに適した単位を使用して、パディングライト値を調整できます。しかし、フォントサイズが変更されたときに自動的に間隔が調整されるため、一般的にはem単位が最適です。

0

私は誰もが簡単なインラインスタイルを提案していないことを驚いている:あなたがやった すべてが正常に見える <div style="margin-right: 500px;">firstlabel</div>

+0

中にエラー、spanタグでありますJukkaが提案したように、より適切な、divではない – ZSC100

関連する問題