Kraft der gesamte Text innerhalb eines div auf 1 Zeile bleiben

ich habe folgendes ...Kraft der gesamte Text innerhalb eines div auf 1 Zeile bleiben

<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 –>

mit allein externen CSS ist es möglich, all das zu zwingen, auf nur eine Linie zu bleiben ?

Quelle

2011-01-10 Skizit

-1

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

Das sollte funktionieren. Bitte beachten Sie, dass mein Snippet CSS3-Selektoren verwendet, sodass es in weniger fortgeschrittenen Browsern möglicherweise nicht funktioniert. Stellen Sie beiden Divs dieselbe Klasse zur Verfügung, und Sie können dann normale Selektoren verwenden.

UPDATE:

Dies wird in IE6 nicht funktionieren, wenn Sie so etwas tun:

<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 –>

(Beachten Sie die neue Klasse .navigation-Links)

Und dann einfach ändern die CSS-Selektor:

div.navigation-links { 
    float: left; 
}

Quelle

2011-01-10 13:34:13

Ich nehme an, dass dieses nicht im IE6 funktioniert? – Skizit

'# nav-oben div {float: left;}' wäre einfacher, funktioniert in allen Browsern und wirkt sich nicht auf andere DIVs mit demselben Klassenpräfix aus. – RoToRa

Das funktioniert, aber ich habe ein div unter diesen, die auf die gleiche Zeile wie die Divs "kommen" scheint. Was müsste ich hinzufügen, um dies zu verhindern? – Skizit

Versuchen Sie folgendes: 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; 
}

Quelle

2011-01-10 13:36:24 polarblau

+1 das ist die Lösung, die ich vorgeschlagen hätte, wenn du nicht zuerst da gewesen wärst. – Spudley

Gibt es Gründe für die inneren DIV s? Ich würde sie einfach fallen lassen - und wenn Sie die Klassen benötigen, weisen Sie sie direkt den Verbindungen zu:

<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 –>

Quelle

2011-01-10 13:36:57 RoToRa

Kraft der gesamte Text innerhalb eines div auf 1 Zeile bleiben

Antwort

Verwandte Themen