Hur man gör en listruta större i CSS

July 12

Även om du inte kan styla en listruta för att se exakt hur du vill utan någon JavaScript inblandade, kan du ändra dess storlek. Eventuella ändringar den totala storleken omfattar inställning bredd och höjd på lådan själv, med hjälp av en större teckenstorlek eller använda stoppning runt texten i rutan. Vid fastställandet dimensioner lådan, är det bäst att bara lämna höjd, men du kan ställa in bredden för att göra lådan längre. Teckenstorlek och stoppning kommer att göra höjden på rullgardins växa för att passa texten och extra avstånd.

Instruktioner

1 Öppna källkoden för din webbsida i en editor som Anteckningar och hitta listrutan:

<Välj id = "mydropdown">
<Option> # 1 </ option>
<Option> # 2 </ option>
<Option> # 3 </ option>
</ Select>

Lägg till ett ID-namn till listrutan som visas, såvida inte en redan finns. Du behöver ID-namn för din CSS-kod.

2 Skriv en stil regel som väljer rullgardins genom sitt ID-namn. Ställ in "width" egendom till önskad bredd för list:

mydropdown {

bredd: 300px;
}

3 Ställ in teckenstorlek för din listrutan i bildpunkter:

mydropdown {

bredd: 300px;
font-size: 18px;
}

Höjden på listrutan kommer att expandera för att rymma större teckenstorlek.

4 Lägg stoppning runt texten i listrutan. Stoppningen kommer att påverka storleken på listrutan själv:

mydropdown {

bredd: 300px;
font-size: 18px;
padding: 10px 5px;
}

Denna utfyllnad lägger 10 pixlar utrymme på vänster och höger sida av lådan, plus 5 pixlar utrymme på toppen och botten. Eftersom lådan har en uppsättning bredd, kommer bredden på själva rullgardins inte att förändras.

Tips

  • Använd ett procentvärde i stället för pixlar för bredden om du vill göra rullgardins bredd i förhållande till storleken på sidan. Formatet är "X%", där "X" är vilken som helst heltal, med början vid noll.

        

Välkommen till dig för att skicka en kommentar:

            
            
            
            

© 2021 Astrixsoft.com | Contact us: webmaster# astrixsoft.com