Warum funktioniert dieses CSS jetzt nicht mehr?

Ich versuche, das bar_top_container div davon abzuhalten, seinen Inhalt zu umhüllen, egal wie breit die Seite ist (dh beide Selects sollten immer in derselben Zeile erscheinen), das funktioniert jedoch nicht, wenn die Seitenbreite zu klein ist beide passen auf eine Zeile, wie kann ich das beheben?Warum funktioniert dieses CSS jetzt nicht mehr?

Styles:

#bar_top_container { position: relative; white-space: nowrap; } 
#bar_top_block { float: left; padding-left: 10px; padding-right: 10px; border-right: 1px solid #4965BB; } 
#clear { clear: both; }

HTML:

<div id="bar_top_container"> 
<div id="bar_top_block"> 
    <span class="bold">select1: </span> 
    <select><option value="asdf">asdf</option></select> 
</div> 
<div id="bar_top_block"> 
    <span class="bold">asdf: </span> 
    <select><option value="blah">-- select action --</option></select> 
</div> 
<div id="clear"></div> 
</div>

Quelle

2010-06-30 user318747

Sie können die Eigenschaften block und inline für ein Element haben, wenn Sie es als ... inline-block anzeigen lassen!

Hier wird der Code korrigiert und Arbeiten:

span.bold sind label s
ein label seiner form Element über die for/id zugeordnet ist Attribute
bar_top_block ist ein id zweimal verwendet. Sollte ein class
keine Notwendigkeit für float: left; als display: inline-block; wird
verwendet
somit keine Notwendigkeit für ein Räumelement entweder
die .bar_top_block Elemente auch inline so jede Leerzeichen zwischen ihnen angezeigt ist als Leerraum angezeigt. Um dies zu vermeiden, habe ich einen Kommentar hinzugefügt, der jegliche Leerzeichen vermeidet, aber trotzdem den HTML-Code lesbar macht.Der Text innerhalb ist ‚kein Leerzeichen‘ so der Entwickler wissen, dass dieser Kommentar es für einen Grund und sollte nicht entfernt werden :)
Sie die width auf body entfernen, es ist nur hier für das Beispiel
Sie mit dem overflow Eigenschaft auf dem Behälter
als IE7 spielen kann und unten Sie den inline-block Wert auf Block-Elemente wie div nicht verstehen, müssen Sie verwenden display: inline und gibt das Element den hasLayout mit zum Beispiel zoom: 1;
der beste Weg, IE7 und unten und nur den Browser ohne bedingten Kommentar
Ich fügte hinzu, ist gezielt Unterstützung für Fx2 aber Dies ist nur aus historischen Gründen :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
    <title>Stack Overflow 3150509 - Felipe</title> 
    <style type="text/css"> 
body { 
    width: 300px; 
} 

#bar_top_container { 
    overflow: auto; 
    white-space: nowrap; 
    border: 1px solid red; 
} 

.bar_top_block { 
    display: -moz-inline-stack; /* Fx2, if you've to support this ooold browser. You should verify that you can still click in the elements, there is a known bug with Fx2 */ 
    display: inline-block; 
    padding-left: 10px; 
    padding-right: 10px; 
    border-right: 1px solid #4965BB; 
} 

    </style> 
    <!--[if lte IE 7]><style type="text/css"> 
.bar_top_block { 
    display: inline; 
    zoom: 1; 
} 
    </style> <![endif]--> 
</head> 
<body> 
    <form method="post" action="#" id="bar_top_container"> 
     <div class="bar_top_block"> 
      <label for="select1">Obviously I am a label: </label> 
      <select id="select1"><option value="asdf">asdf</option></select> 
     </div><!-- no whitespace 
     --><div class="bar_top_block"> 
      <label for="select2">I'm a label too and I need a for attribute: </label> 
      <select id="select2"><option value="blah">-- select action --</option></select> 
     </div> 
    </form> 
</body> 
</html>

Quelle

2010-06-30 17:38:58 FelipeAls

Um die Leerzeichen zwischen den Elementen zu entfernen, können Sie 'font-size: 0;' auf dem übergeordneten Element verwenden. Dann, wo immer Sie drinnen sind, definieren Sie einfach die richtige Größe des Textes, zum Beispiel: '.parent {display: inline-block; Schriftgröße: 0; } .parent * {font-size: 12px} '. Viel Glück. –

@SlavikMe Ich benutze diese Methode nicht, weil ich für bessere Zugänglichkeit mit 'em' Einheit für die Schriftgröße arbeite und' 0' alles kaputt macht. Siehe zum Beispiel [C14: Verwenden von em-Einheiten für Schriftgrößen] (http://www.w3.org/TR/WCAG20-TECHS/C14) WCAG 2.0 Technik – FelipeAls

@FelipeAls: Danke Kumpel! Sehr nützlicher Beitrag. Es hat mir wirklich den Tag gerettet. – YashG99

Floating Elements als white-space: nowrap wickeln nicht für Elemente Block, sondern nur für die Inline-Elemente und Text funktioniert.

Quelle

2010-06-30 15:03:43 jantimon

gibt es einen Weg um es herum? – user318747

warten Sie auf HTML5;) - Es gibt viele HTML4 CSS-Workarounds. Suchen Sie nach dem Float-Layout. – jantimon

https://bugzilla.mozilla.org/show_bug.cgi?id=488725 – gavenkoa

-1

Ich schlage eine gültige Form Nutzung zu verwenden:

<form> 
    <label>select1: <select><option value="asdf">asdf</option></select></label> 
    <label>asdf: <select><option value="blah">-- select action --</option></select></label> 
</form>

Hoffe, es hilft.

Quelle

2012-12-20 15:53:11

Warum funktioniert dieses CSS jetzt nicht mehr?

Antwort

Verwandte Themen