span要素はdivの中にスペースを埋めるの取得、私はこのような何かを持ってしようとしている

Question

：ここ

<div class="container"> 
    <span class="left">Title</span> 
    <span class="center">&nbsp;</span> 
    <span class="right">value</span> 
</div> 

そして、私のCSS：

ここ

 
|--------------fixed width---------------| 
Title1 .......................... value1 
Title2 ................... another value 
Another title ........ yet another value 

は私のHTMLコード例です

.center { 
    text-align: center; 
    border-bottom: 1px dotted blue; 
    display: inline-block; 
    outerWidth: 100%; 
} 

.right { 
    display: block; 
    border: 1px dotted red; 
    float: right; 
} 

.left { 
    display: block; 
    text-align: right; 
    border: 1px dotted red; 
    margin-right: 0px; 
    float: left; 
} 

.container { 
    width: 200px; 
    border: 1px dotted red; 
    padding: 5px; 
} 

スパン「中央」を他の2つのスパン要素の間のスペースを埋めるように拡張することはできますか？ jsfiddle上

コード：http://jsfiddle.net/XqHPh/

ありがとうございます！あなたの順序を変更した場合、あなたがこの

HTML

<div class="container"> 
    <span class="left">Title</span> 
    <span class="right">value</span> 
    <span class="center">&nbsp;</span> 
</div> 

、ここのようなHTML構造を変更する必要があり、このため

Answer 1

のCSSです2が先.center要素の要素を浮かべ

<div class="container"> 
    <span class="left">Title</span> 
    <span class="right">value</span> 
    <span class="center">&nbsp;</span> 
</div> 

場所：HTML、あなたは簡単な解決策を得ることができます。 .center要素は通常のコンテンツフローになり、左右のコンテンツを囲みます。

CSS：あなたは要素をフロートすると

.center { 
    display: block; 
    border-bottom: 1px dotted blue; 
    overflow: auto; 
    position: relative; 
    top: -4px; 
} 

.right { 
    float: right; 
    margin-left: 10px; 
} 

.left { 
    float: left; 
    margin-right: 10px; 
} 

.container { 
    width: 200px; 
    border: 1px dotted red; 
    padding: 5px; 
} 

は、表示タイプをブロックするように計算し、それを宣言するので、必要はありません。

また、.centerの場合、overflow: autoを追加すると、フローティング要素のエッジを超えないようにブロックが拘束されます。結果として、ボトムボーダーはタイトルと値のテキストに下線を引いていません。

最後に、position: relativeを追加して、.centerを数ピクセル上に移動して、境界線をテキストのベースラインに近づけることができます。

フィドル：あなたは、このためのスパンを作成し、展開したいhttp://jsfiddle.net/audetwebdesign/DPFYD/

Answer 2

は.center span

.center { 
    text-align: center; 
    border-bottom: 1px dotted blue; 
    display:block; 
} 

jsFiddle File