Wie man eine HTML Dropdown-Feld vergrößern

November 11

HTML Dropdown-Menüs eine Reihe von vordefinierten Optionen für den Betrachter einer Webseite anzuzeigen und ermöglichen den Betrachter eine Option aus der Liste auswählen. Ein Web-Browser zeigt automatisch die Breite des Dropdown-Feldes, um die längste Option passen, aber dies ist nicht immer wünschenswert Verhalten. Cascading Style Sheets oder CSS, können Sie definieren, wie der Browser Elemente wie ein Drop-Down-Menü zeigt, indem Sie Eigenschaften wie die Width-Eigenschaft festlegen. Einen CSS-Stil auf alle Drop-Down-Menüs auf der Seite anwenden, können Sie sicherstellen, dass alle Menüs auf eine einheitliche Größe zu rendern.

Anweisungen

1 Erstellen Sie eine neue HTML-Seite in einem Text-Editor oder Web-Design-Anwendung. Fügen Sie den folgenden Code zwischen den HTML-Code "< Body >" "< / body >" Tags auf der Seite ein HTML-Formular und die Drop-Down-Menü hinzufügen.

< Formularname = "form1" Methode = "post" action="example.htm" >

< select Name = "ExampleSelect" Id = "ExampleSelect" >

&lt;option value="1">Option One&lt;/option>

&lt;option value="2">Option Two&lt;/option>

&lt;option value="3">Option Three&lt;/option>

< / select >

< / form >

Speichern Sie die Seite als "Befehl" und Upload auf Ihren Webserver. Die Seite in einem Webbrowser anzeigen, und Sie werden sehen, dass das Drop-Down-Menü automatisch angepasst wird, um die längste Option passen die "Option drei."

2 Fügen Sie den folgenden Code ein neues CSS-Stylesheet direkt über dem schließenden HTML erstellen "< / Head >" Tag.

< Typ style = "Text/Css" >

.Wide-Dropdown {}

width: 200px;

}

< / style >

Dadurch entsteht eine neue Stilklasse mit dem Namen "weite-Dropdown-Liste" setzt die Breite des Elements, dem es auf 200 Pixel zugewiesen ist.

3 Weisen Sie die neuen Formatklasse Drop-Down-Menü ändern wählen Sie HTML-Tags zu lesen:

< select Name = "ExampleSelect" Id = "ExampleSelect" Class = "weite-Dropdown" >

Hochladen Sie die Seite auf Ihren Webserver, und dann aktualisieren Sie die Seite in Ihrem Web-Browser. Sie werden sehen, dass der Dropdown-Liste eine Breite von 200 Pixeln hat.

Tipps & Warnungen

  • Verwenden Sie externe Stylesheets, um standard-Stile für HTML-Elemente, die auf jeder Seite Ihrer Website verwendet werden, um ein einheitliches Design über Ihre gesamte Website sicherzustellen erstellen.
  • Achten Sie beim Festlegen der Breite des Dropdown-Felder zu verhindern, dass sie zu schmal, um innerhalb der Box angezeigt Option vollständig zu lesen.