Selectați lățimea opțiunii (Programare, Css, Selectează, Lățime, Opțiune)

John Makii a intrebat.

Nu sunt foarte experimentat în CSS și nu am instrumente care sunt cel mai bine utilizate în proiectarea paginilor web, cum ar fi Microsoft Expression.

Problema mea este simplă, este cumva vană… neways,

vreau ca pagina mea să arate cât mai simetric posibil, așa că vreau ca opțiunile de selecție să aibă aceeași lățime. Am căutat și cea mai bună soluție este să folosesc opțiunea width=”” pe css. deci cum procedez?

am acest exemplu:

<tr>
        <td><label for="meal">Meal:</label></td>
        <td>
        <select name="meal">
                                        <option selected="selected" value="0">Any</option>
                                        <option value="Breakfast">Breakfast</option>
                                        <option value="Brunch">Brunch</option>
                                        <option value="Lunch">Lunch</option>
                                        <option value="Snack">Snack</option>
                                        <option value="Dinner">Dinner</option>
                                    </select>
        </td>


        <td><label for="cooking">Cooking:</label></td>
        <td>
        <select name="cooking">
                                        <option selected="selected" value="0">Any</option>
                                        <option value="Baked">Baked</option>
                                        <option value="BBQ">Barbecque</option>
                                        <option value="Boiled">Boiled</option>
                                        <option value="Dfried">Deep Fried</option>
                                        <option value="Grilled">Grilled</option>
                                        <option value="Steamed">Steamed</option>
                                    </select>
        </td>

4 răspunsuri
Jukka K. Korpela

Dacă doriți să setați aceeași lățime pe toate select elemente dintr-un document, puteți scrie, de ex.

<style>
select { width: 5.5em }
</style>

în elementul head parte. Dacă doriți să faceți acest lucru pentru anumite select elemente doar, trebuie să înlocuiți selectorul select cu ceva mai restrictiv, de ex. select.foo pentru a restricționa efectul la acele elemente select elemente care au eticheta class=foo atribut.

Acest lucru este complicat, deoarece aveți nevoie de o lățime suficientă pentru toate opțiunile și, probabil, doriți să vă apropiați cât mai mult posibil de lățimea maximă. Lățimile opțiunilor depind de textul acestora și de font. (Utilizând atributul px înrăutățește și mai mult lucrurile. Atunci lucrurile ar depinde și de dimensiunea fontului).

Luați în considerare dacă este necesar să setați lățimile la fel. Este doar o preferință estetică, care nu este împărtășită de toți oamenii și care poate fi, de fapt, dăunătoare pentru utilizabilitate. O listă derulantă cu opțiuni scurte ar trebui poate să arate diferit de o altă listă derulantă care are opțiuni lungi.

Comentarii

  • Vă mulțumim pentru informații. –  > Por John Makii.
alejo802

Pentru setarea lățimii, aveți o mică greșeală de scriere. Aveți nevoie de

<select style="width: 400px">

Comentarii

  • Încă un lucru, am un fișier css, așa că id mai degrabă îl pun acolo, cum leg aceste selecții? aceasta este întrebarea mea principală –  > Por John Makii.
  • @user1891608, ar trebui să clarificați care este întrebarea dvs. principală prin editarea întrebării în sine, nu doar în comentarii. În prezent, nu se menționează deloc problema pe care o caracterizați aici ca fiind întrebarea principală. –  > Por Jukka K. Korpela.
  • Cred că am făcut-o, am întrebat cum procedez… adică cum fac asta… care sunt modalitățile prin care pot face asta… deși nu în mod specific… am uitat să menționez asta, așa că îmi pare rău 🙁 –  > Por John Makii.
Dale

În foaia ta de stil:

table tr td select{width:150px;}

Asta va face ca toate căsuțele de selectare din interiorul unei celule de tabel să aibă aceeași lățime. Eu nu aș merge pe ruta inline css.

Comentarii

  • Acest lucru nu schimbă nimic, există vreo sintaxă specială pe care ar trebui să o știu? –  > Por John Makii.
  • Ei bine, acest lucru ar trebui să schimbe cu siguranță lățimea casetei de selectare. Sunteți sigur că faceți legătura cu o foaie de stil externă în mod corespunzător? Ați aruncat o privire la Firebug pentru Firefox? Este un instrument foarte bun pentru verificarea html și css. –  > Por Dale.
akwasiijunior

Aș pune o clasă pe selecturi și aș folosi

<select class="selectList" id="meal"><option>your options</options></select

și apoi am adăugat acest lucru la css-ul tău

select.selectList { width: 150px; }

Notă: eticheta pentru lucrări cu id-uri și nu nume și abțineți-vă de la utilizarea css-ului în stil inline ().

jsfiddle