Як отримати рівну ширину введення та вибрати поля

109

У формі у мене є одне поле вибору та два поля введення. Ці елементи вертикально вирівняні. На жаль, я не можу отримати рівну ширину цих елементів.

Ось мій код:

<select name="name1" style="width:198px">
  <option>value1</option>
  <option>value2</option>
</select><br/>
<input type="text" name="id1" style="width:193px"><br/>
<input type="text" name="id2" style="width:193px">

Для наведеного вище прикладу найкраща ширина елемента для вибору - 198 або 199 пікс (звичайно, я спробував 193 пікселів, але різниця є головною). Я думаю, це залежить від роздільної здатності, на різних комп'ютерах і браузерах, оскільки ці елементи не мають однакової ширини (іноді я думаю, різниця становить приблизно 1 або 2 пікселя). Я намагався встановити ці елементи у рядках div або table, але це не допомагає.

З: Як я міг отримати точно рівну ширину цих елементів?

— luk4443
джерело

1

Запитав той же питання тут: stackoverflow.com/questions/895904 / ...

— Блам

134

Оновлена відповідь

Ось як змінити модель коробки, що використовується елементами введення / textarea / select, щоб вони поводилися однаково. Вам потрібно використовувати box-sizingвластивість, реалізовану з префіксом для кожного браузера

-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box; 
box-sizing:content-box;

Це означає, що 2px різниці, про яку ми згадали раніше, не існує ..

приклад на http://www.jsfiddle.net/gaby/WaxTS/5/

Примітка: У IE він працює від версії 8 і вище.

Оригінальний

якщо ви скидаєте свої кордони , то selectелемент завжди буде 2 пікселя менше inputелементів ..

приклад: http://www.jsfiddle.net/gaby/WaxTS/2/

— Габріеле Петріолі
джерело

Дякуємо за відповідь І якщо я встановити межу для 2px, між полями введення та вибору буде 4 пікселя, для межі 3px - 6px ...?

— luk4443

1

@luk, ні. Якщо обидва введення та вибір мають однакову ширину меж, різниця залишиться до 2 пікселів ..

— Габріеле Петріолі

Дякую. Я пробую ваш код у різних браузерах та у Firefox, все гаразд, але він не працює в IE 8 і Opera (є відмінності між входом та шириною вибору) :(

— luk4443

1

Можливо, ви мали намір вказати розмір поля: border-box? Я думаю, що це ви мали на увазі. Вміст-вікно є типовим, коли padding + поля додають ширину.

— O'Rooney

1

Це дійсно повинно бути: -ms-box-розмір: content-box; -moz-box-розмір: content-box; -webkit-box-розмір: box-content; розмір поля: контент-коробка; Стандартний синтаксис повинен бути останнім, щоб дотримуватися методології прогресивного вдосконалення, щоб у майбутньому, коли стандарт широко впроваджений, користувацькі агенти за замовчуванням використовуватимуть стандартний синтаксис, і ви можете видалити попередньо встановлені версії.

— користувач1739635

118

Я спробував відповідь Габі (+1) вище, але це лише частково вирішило мою проблему. Натомість я використав наступний CSS, де зміст поля змінено на border-box:

input, select {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

— tomsv
джерело

Так, схоже, що форми форм, наприклад: textarea, поля введення, завжди добре працюють з моделлю box box. кнопка, прапорець, радіо, надсилання, скидання та введення пошуку за замовчуванням є полем для межі.

— Vennsoh

2

Ось хороший аргумент, чому ви повинні використовуватиbox-sizing: border-box . Для гарної універсальної реалізації розгляньте налаштування на html-елемент верхнього рівня, а потім успадковуючи його вниз, щоб його можна було легко змінити.

— KyleMit

content-box нічого не робив у моєму випадку. Мені потрібна булавна рамка, щоб вони були однакової ширини. Дякую, прикордонна скринька - це краще рішення.

— Мануель Гофман

5

Додайте цей код у css:

 select, input[type="text"]{
      width:100%;
      box-sizing:border-box;
    }

— 151291
джерело

-4

створити інший клас та збільшити розмір за допомогою прикладу 2px

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }

— ionMobDev
джерело