Ich habe eine Listbox und möchte deren Breite verringern.
Hier ist mein Code:
<select name="wgtmsr" id="wgtmsr" style="width: 50px;">
<option value="kg">Kg</option>
<option value="gm">Gm</option>
<option value="pound">Pound</option>
<option value="MetricTon">Metric ton</option>
<option value="litre">Litre</option>
<option value="ounce">Ounce</option>
</select>
Dieser Code funktioniert auf IE 6, jedoch nicht in Mozilla Firefox (neueste Version). Kann mir jemand bitte sagen, wie ich die width
der Dropdown-Liste in Firefox verringern kann?
Versuchen Sie diesen Code:
<select name="wgtmsr" id="wgtmsr">
<option value="kg">Kg</option>
<option value="gm">Gm</option>
<option value="pound">Pound</option>
<option value="MetricTon">Metric ton</option>
<option value="litre">Litre</option>
<option value="ounce">Ounce</option>
</select>
CSS:
#wgtmsr{
width:150px;
}
Wenn Sie die Breite der Option ändern möchten, können Sie dies in Ihrer CSS tun:
#wgtmsr option{
width:150px;
}
Möglicherweise haben Sie einen Konflikt in Ihren CSS-Regeln, der die Breite Ihrer Auswahl überschreibt
Die Dropdownbreite selbst kann nicht eingestellt werden. Die Breite hängt von den Optionswerten ab. Siehe auch hier (jsfiddle.net/LgS3C/)
Wie das Auswahlfeld aussieht, hängt auch von Ihrem Browser ab.
Sie können Ihre eigene Kontrolle erstellen oder Select2 https://select2.org verwenden.
Erstellen Sie eine CSS und setzen Sie den Wert style="width:50px;"
in css code. Rufen Sie die Klasse vonCSSin der Dropdown-Liste auf. Dann wird es klappen.
versuchen Sie das Argument !important
, um sicherzustellen, dass das CSS keinen Konflikt mit anderen von Ihnen angegebenen Stilen hat. Auch die Verwendung einer reset.css ist gut, bevor Sie eigene Styles hinzufügen.
select#wgmstr {
max-width: 50px;
min-width: 50px;
width: 50px !important;
}
oder
<select name="wgtmsr" id="wgtmsr" style="width: 50px !important; min-width: 50px; max-width: 50px;">
Diese:
<select style="width: XXXpx;">
XXX = eine beliebige Anzahl
Funktioniert hervorragend in Google Chrome v70.0.3538.110
Wenn Sie die Breite der Liste steuern möchten, die abfällt, können Sie dies folgendermaßen tun.
CSS
#wgtmsr option {
width: 50px;
}
Das hat für mich funktioniert:
ul.dropdown-menu > li {
max-width: 144px;
}
in Chromium und Firefox.