2010-02-17 7 views
6

Dies ist wahrscheinlich eine grundlegende CSS-Frage, aber ich spreche nicht fließend CSS und scheint nur im Kreis zu gehen.HTML-Element mit fester Breite und Bildlaufleisten auswählen

Hier ist, was ich auf Englisch habe: Ich habe eine feste Breite wählen Element von 400px. Der Text für jede Option passt nicht in die 400-Pixel-Breite. Ich bekomme keine horizontale Bildlaufleiste, es schneidet nur den Text ab. Wie bekomme ich die Bildlaufleiste?

Hier ist, was ich in HTML/CSS haben:

<div> 
    <select style="width=400px"> 
    <option>this text is too wide to fit and gets cut off.....</option> 
    ... 
    </select> 
</div> 

ich den Überlauf Eigenschaft habe versucht, aber ich bin es entweder falsch verwendet oder es funktioniert nicht auf dem select-Element.

Wie bekomme ich die horizontale Bildlaufleiste?

Antwort

13

Formelemente notorisch schwer zu Stil.

Für Ihre Breiteneinstellung haben Sie einen kleinen Tippfehler. Sie müssen

<select style="width: 400px"> 

Ansonsten, denke ich, können horizontale Scrollbalken kein normales select Element unter Verwendung erreicht werden. Sie müssten auf eine JavaScript-basierte Alternative wie SexyCombo zurückgreifen, die für eine Bildlaufleiste angepasst werden kann. Weitere Optionen hier: 11 jQuery Plugins to Enhance HTML Dropdowns

+0

sorry, die "width =" ist ein Tippfehler und ist nicht in meinem eigentlichen Code . Ist es möglich, die Auswahl wirklich groß zu machen, um den gesamten Text anzupassen, und das umgebende div zu einer festen Breite/Höhe zu machen, die Scrollbalken hat? – schmimd04

+0

@ schmimd04 Das sollte möglich sein, indem man dem umgebenden DIV eine feste Größe gibt und 'overflow: auto;' Allerdings bringt es zusätzliche Probleme mit sich, so wie die Pfeiltaste auch ausgeblendet wird. Aber probier es aus. –

+1

Geben Sie der Auswahl nicht einfach eine "Breite" und sie ist so groß wie die längste Option. Dann umgeben Sie die Auswahl mit einem DIV, das z.B. hat '' Breite: 400px; Überlauf: auto; '' – Select0r

3
  1. sollte es sein <select style="width: 400px;"> (nicht "width=")
  2. eine normale HTML-select keine Scrollbar haben, egal, was Sie tun :)
+1

'2.a wählen keinen Scrollbar, egal, was Sie tun können:)' - Wie gehen Sie mit Mehrfachauswahl? ' –

+1

@Andy nicht fair, 'multiple' wählen ein anderes Tier ist :) –

0

Sie verwenden Inline-CSS-Syntax sollten Sie verwenden style = "width: 400px;"

Und wenn Sie einfach in Mehrfachauswahl haben verwenden verwenden

<select multiple style="width: 400px;"> 
Verwandte Themen