Wie steuere ich die Breite der HTML-Auswahl-Dropdown-Optionen?

Effektive Breitenverwaltung für HTML-Auswahl-Dropdown-Optionen

Das Füllen eines Auswahlfelds mit langen Optionen stellt eine Herausforderung dar, wenn die Dropdown-Breite die Grenzen des Bildschirms überschreitet . Durch manuelles Festlegen der Breite des Auswahlfelds kann die Breite des Dropdown-Menüs häufig nicht eingeschränkt werden.

Eine Lösung besteht darin, das Auswahlfeld in einen Div-Container mit fester Breite einzukapseln. Wenn Sie die Breite des Div und die Breite des Select-Tags auf „Auto“ setzen, enthalten die meisten Browser das Dropdown-Menü innerhalb des Div. Beim Klicken wird das Dropdown-Menü jedoch erweitert und zeigt die vollständigen Optionen an.

HTML:

<code class="html"><div class="dropdown_container">
  <select class="my_dropdown" id="my_dropdown">
    <option value="1">LONG OPTION</option>
    <option value="2">short</option>
  </select>
</div></code>

CSS:

<code class="css">div.dropdown_container {
    width:10px;
}

select.my_dropdown {
    width:auto;
}

/*IE FIX */
select#my_dropdown {
    width:100%;
}

select:focus#my_dropdown {
    width:auto;
}</code>

Diese Methode verwaltet die Dropdown-Breite effektiv, ohne die Lesbarkeit zu beeinträchtigen. Der div-Container schränkt die anfängliche Breite des Dropdowns ein, während die „auto“-Breite der Auswahl eine nahtlose Erweiterung beim Klicken ermöglicht. Aus Gründen der Internet Explorer-Kompatibilität sorgt der enthaltene CSS-Fix für eine ordnungsgemäße Darstellung.

Das obige ist der detaillierte Inhalt vonWie steuere ich die Breite der HTML-Auswahl-Dropdown-Optionen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!