Schwimmendes Element auf Blockebene: Muss es die Breite festlegen, wenn ja, wie?

StackOverflow https://stackoverflow.com/questions/406504

  •  03-07-2019
  •  | 
  •  

Frage

Sagen Sie, ich habe Textboxen, Dropdownlisten und senden Schaltflächen. Sie sind alle Inline-Elemente. Was bedeutet, dass "offiziell" Rand, Polster-, Breite und Höheneigenschaften ignoriert werden sollten (in der Praxis nicht wirklich). Wenn ich den richtigen Weg gehen würde, um die Höhe auf einen Knopf zu setzen, würde ich so etwas wie Anzeige schreiben: Block und dann die Höhe definieren. Es gibt jedoch Überlegungen, dass sich ein Block -Level -Element unerwartet erweitern würde, sodass ich seine Breite besser auf einen festen Wert einstellen würde. Das Problem ist, dass ich ihre Breite nicht kenne, da es dynamisch auf dem Text der Schaltfläche definiert werden kann.

Ein weiteres Szenario: Ich möchte über ein Menü über erstellen <ul> und <li>. Ich möchte, dass es horizontal ausgerichtet ist und einige Gegenstände links gruppiert sind und ein paar nach rechts gestreckt sind. Beide <ul> und <li> sind Elemente auf Blockebene. Da ich möchte, dass mein Menü alle verfügbaren horizontalen Speicherplatz einnimmt, dann mit der Höhe der Elemente gespielt und Menüpunkte auf beide Seiten gedrückt werden, ist der Blockmodus für mich in Ordnung. Ich benutze nur Float: Links und Float: Right, um die Aufgabe zu erreichen. Die Verwendung sollte jedoch wieder eine Breite für Menüelemente setzen, da es sich um Blockelemente handelt. Ich kenne ihre Breiten nicht, weil der Text der Elemente variieren kann. Aber es scheint, dass alles so gut wie es ist.

Ich habe keine Probleme mit beiden Inline -Elementen bemerkt, die gezwungen sind, als Blockelemente zu rendern, ohne zu schweben oder Breite eingestellt zu werden, oder mit dem Beispiel für Listenelemente. Es funktioniert gut in IE7, FF3, Opera 9 und Safari, was auch immer die aktuelle Version ist. Es bleibt die Frage: Sollte ich mir Sorgen um diese Inline-zu-Block-Elemente oder echten Blockelemente machen, schwebten jedoch ohne die Breite oder lassen Sie einfach alles so, wie es ist? Vermisse ich etwas oder ist es nur noch ein der Dinge, die Sie einfach nicht erwarten sollten, richtig zu werden?

War es hilfreich?

Lösung

Sagen Sie, ich habe Textboxen, Dropdownlisten und senden Schaltflächen. Sie sind alle Inline-Elemente. Was bedeutet, dass "offiziell" Rand, Polster-, Breite und Höheneigenschaften ignoriert werden sollten (in der Praxis nicht wirklich). Wenn ich den richtigen Weg gehen würde, um die Höhe auf einen Knopf zu setzen, würde ich so etwas wie Anzeige schreiben: Block und dann die Höhe definieren. Es gibt jedoch Überlegungen, dass sich ein Block -Level -Element unerwartet erweitern würde, sodass ich seine Breite besser auf einen festen Wert einstellen würde. Das Problem ist, dass ich ihre Breite nicht kenne, da es dynamisch auf dem Text der Schaltfläche definiert werden kann.

Es sei denn, Sie beziehen sich auf Internet Explorer's Box Model Macken, Sie sollten sich nicht Sorgen machen, dass sich etwas, das unerwartet erweitert oder sich zusammenzieht. Solange Sie sich darum kümmern Normalisierung für die Browservariation, Es wird dir gut gehen. Wenn Sie unterwegs einen unerwarteten und unerwünschten Nebeneffekt haben, um Ruhm zu entwerfen, debuggen Sie es, da dies der Programmiererfehler ist, mit dem Sie sich auseinandersetzen. CSS kann schrullig sein, aber das ist für die meisten großen Browser keine angemessene Entschuldigung. Die anderen 5%, über die wir nicht sprechen.

So verstehe ich Ihr Problem:

Sie möchten ein Menü mit schwebendem <li> Damit Sie ein horizontales Menü haben, das die Breite des Ansichtsfensters (was Ihr Benutzer im Browserfenster "sieht), um konsequent die volle Breite des Ansichtsfensters zu sein.

Es hört sich so an, als würden Sie an ein Design mit fester Breite denken, wenn es wirklich so klingt, als würde es zu Ihren Zwecken passen, ein flüssiges Breitendesign. Dies bedeutet, dass Sie ein Design erstellen, das „elastisch“ ist und sich im Verhältnis zur Größe des Browserfensters des Benutzers erweitert und zusammenzieht. Wenn Sie Ihr Design erstellt haben, die auf jedes Element eingestellt werden, können Sie wahrscheinlich einen eleganten Weg finden, um einen Flüssigkeitsbreiten-Header und eine Navigation aufrechtzuerhalten, aber über einen Hauptgebiet der Hauptbreite verfügen. Sie können ein glückliches Medium ohne vollständige Neugestaltung finden. Diese Vorgehensweise wird wahrscheinlich das sein, wonach Sie suchen. Eine gute Erläuterung der Begriffe fester Breite und Flüssigkeitsbreite kann hier gefunden werden, wenn Sie mit dem Jargon nicht vertraut sind und diese Ideen genauer betrachten möchten.

Noch eins für die Straße:

Setzen Sie eine Breite auf allen schwebenden Elementen wird nicht nur empfohlen, sondern ist auch Teil des CSS2 -Standards gemäß W3C.

  • Angelina

Andere Tipps

Du bekommst dich ein bisschen gestresst, denke ich :)

Kasse diese Links, insbesondere 9,4, 9,5 und 10.3. Und Strg-f "Inline-Block"

Wenn wir die "offizielle" Linie einnehmen, die Sie erwähnen, ist das Leben einfach, da wir uns keine Sorgen um Breiten, Höhen und auf diese Elemente machen müssen.

Denken Sie nicht, dass Pixel perfekt ist, mach dir keine Sorgen um die Minutien der Präsentation, folge den Standards, erlaube dem Browser und seinen Benutzern, Stile zu definieren ...

(Wenn es nur so einfach in der "unabhängigen" realen Welt war)

Ok, ich nehme an, meine Frage wurde nicht richtig verstanden. Was wird passieren, wenn ich keine Breite für schwebende Kartons einstelle? Ich kann es nicht einstellen, ich weiß es nicht. Weil es vom Inhalt abhängt. Werden alle Kisten einfach auf ihre Inhaltsbreite schrumpfen? So funktioniert es in der Praxis. Und ich bin damit zufrieden. Gibt es eine offizielle Bestätigung, dass dieses Verhalten zu erwarten ist?

Hinzugefügt: Ich foudn hier etwas Interessantes: http://www.webmasterworld.com/css/3811603.htm

Ich schlage vor, die Empfehlungen für eine technische Erklärung für die Unterschiede zu überprüfen, aber einfach ausgedrückt, das Verhalten von Floats änderte sich zwischen CSS2 (1998) und CSS2.1 (ein paar Monate 2005 und dann 2007). Per CSS2 war es obligatorisch, eine Breite auf Schwimmern festzulegen, während das in FF3 sehen Sie in FF3 CSS2.1 ist. Das bedeutet, dass die Browser vor Jul/2007 der Empfehlung entsprechen, die für ihre Herstellungszeit relevant ist, wenn sie Div#Container die vollständige Ansichtsfensterbreite dehnen. (Was die Oper nicht erklärt, aber es hat immer sein eigenes Ding getan.)

Wenn ja, dann bin ich behauptet. Wie ich bereits erwähnt habe, funktioniert es in aktuellen IE7, FF3, Opera 9 und Safari.

Noch mehr Kommentare?

(Angenommen, wenn ich Ihr Problem verstehe)

In den meisten Fällen müssen Sie keine Breite auf Listenelementen festlegen. Aber (ja, es gibt einen aber hier) Wenn Sie einen Link mit Anzeige haben: Block (Angenommen, Sie möchten Schiebetür verwenden), müssen Sie einen kleinen Trick machen:

Die HTML:

<ul class="menu">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

Und CSS:

.menu li {
    float:left
}
    .menu li a {
        display:block;
    }
    /* ===================== */
    /* = and the IE6 trick = */
    /* ===================== */ 
    * html .menu li a {
        width:1%;
        white-space:nowrap;
    }

Wenn Sie dies nicht mögen, wird der Link an alle Eltern ausgestrahlt. Der Link nicht das Listenelement;) Auf diese Weise haben Sie eine "Min-Width" auf IE6 festgelegt und Sie werden keine anderen Probleme haben.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top