2011-01-10 8 views
1

に維持するのdiv内のすべてのテキスト...力だけでは、外部CSSを使用して、私は次のことを持っている1行

<div id="nav-above" class="navigation"> 
<div class="nav-previous"><a href="link" rel="prev"><span class="meta-nav">&laquo;</span> title</a></div> 
<div class="nav-next"><a href="link" rel="next">title <span class="meta-nav">&raquo;</span></a></div> 
</div><!– #nav-above –> 

はちょうどライン上に残すことのすべてを強制することが可能です?

答えて

-1
div[class^=nav-] { 
    float: left; 
} 

これでうまくいくはずです。私のスニペットはCSS3セレクタを使用しているため、先進のブラウザでは機能しない可能性があります。両方のdivに同じクラスを提供すると、通常のセレクタを使用できます。

UPDATE:その後、

<div id="nav-above" class="navigation"> 
<div class="nav-previous navigation-links"><a href="link" rel="prev"><span class="meta-nav">&laquo;</span> title</a></div> 
<div class="nav-next navigation-links"><a href="link" rel="next">title <span class="meta-nav">&raquo;</span></a></div> 
</div><!– #nav-above –> 

(新しいクラス.navigationリンクに注意してください)

そして、ちょうど変更:あなたはこのような何かをしない限り、

これは、IE6で動作しません。 CSSセレクター:

div.navigation-links { 
    float: left; 
} 
+0

私はこれがIE6でうまくいかないと思いますか? – Skizit

+3

'#nav-above div {float:left;}'は簡単で、すべてのブラウザで動作し、同じクラス接頭辞を持つ他のDIVには影響しません。 – RoToRa

+0

これは動作しますが、私はdivのものと同じ行に "出てくる"ようなdivを持っています。これを防ぐために何を追加する必要がありますか? – Skizit

8

試してみてください:http://jsfiddle.net/dT49F/

HTML:

<div class="container"> 
    <div id="nav-above" class="navigation"> 
     <div class="nav-previous"> 
      <a href="link" rel="prev"> 
       <span class="meta-nav">&laquo;</span> 
       much much longer link title here and here and here 
      </a> 
     </div> 
     <div class="nav-next"> 
      <a href="link" rel="next"> 
       much much longer link title here and here and here 
       <span class="meta-nav">&raquo;</span> 
      </a> 
     </div> 
    </div> 
</div> 

CSS:

.container div { 
    display: inline; 
    white-space: nowrap; 
} 
+0

+1これはあなたが最初にそこにいなかったら私が示唆した解決策です。 – Spudley

1

インナーDIVのための任意の理由は?私はちょうどそれらを落としたいと思います - クラスが必要な場合は、リンクに直接割り当ててください:

<div id="nav-above" class="navigation"> 
<a href="link" rel="prev" class="nav-previous"><span class="meta-nav">&laquo;</span> title</a> 
<a href="link" rel="next" class="nav-next">title <span class="meta-nav">&raquo;</span></a> 
</div><!– #nav-above –>