Hvordan øke størrelsen på et HTML drop-down boks
HTML rullegardinmenyer viser en rekke forhåndsdefinerte alternativer til betrakteren på en webside, og la betrakteren å velge et alternativ fra listen. En nettleser viser automatisk bredden på rullegardinlisten for å passe den lengste alternativet, men dette er ikke alltid ønskelig atferd. Cascading Style Sheets eller CSS, kan du omdefinere hvordan nettleseren viser elementer som en rullegardinmenyen ved å sette egenskaper slik som bredden eiendom. Ved å bruke en CSS stil til alle drop-down menyer på siden, kan du sikre alle menyene gjengjelde en jevn størrelse.
Bruksanvisning
1 Opprett en ny HTML-side i en teksteditor eller webdesign program. Legg inn koden under mellom HTML "<body>" "</ body>" koder for å legge til et HTML-skjema og rullegardinmenyen til siden.
<Form name = "Form1" method = "post" action = "example.htm">
<Velg name = "exampleSelect" id = "exampleSelect">
<option value="1">Option One</option>
& Lt; alternativet value = "2"> Alternativ to & lt; / option>
& Lt; alternativet value = "3"> Option Tre & lt; / option>
</ Velge>
</ Form>
Lagre siden som "example.htm" og laste opp til webserveren. Vis siden i en nettleser, og du vil se på rullegardinmenyen automatisk endret for å passe den lengste alternativet, som er "Option Tre."
2 Legg til følgende kode for å opprette en ny CSS-stilark, like over den avsluttende HTML "</ head>" tag.
<Style type = "text / css">
.wide-dropdown {
width: 200px;
}
</ Style>
Dette skaper en ny type klasse kalt "wide-rullegardin", som angir bredden av elementet som den er knyttet til 200 piksler til.
3 Gi den nye stilen klassen til rullegardinmenyen ved å endre HTML velger tag til å lese:
<Velg name = "exampleSelect" id = "exampleSelect" class = "wide-dropdown">
Last siden til din server, og deretter oppdatere siden i nettleseren. Du vil se at rullegardin har en bredde på 200 piksler.
Hint
- Bruk eksterne stilark til å lage standard stiler for HTML-elementer som brukes på hver side av nettstedet ditt, for å sikre en enhetlig design på tvers av hele området.
- Vær forsiktig når du setter bredden på rullegardinmenyene for å unngå å gjøre dem for smal til å lese hele alternativet teksten som vises inne i boksen.