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">

&lt;option value="1">Option One&lt;/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.