在HTML中选择输入和文本输入 - 最佳方式使宽度相等？ [英] Select inputs and text inputs in HTML - Best way to make equal width?

问题描述

我有一个简单的表单（仅供说明）...

I've got a simple form like so (illustrative purposes only)...

<form>

   <div class="input-row">
      <label>Name</label>
      <input type="text" name="name" />
   </div>

   <div class="input-row">
      <label>Country</label>
      <select name="country">
         <option>Australia</option>
         <option>USA</option>
      </select>
   </div>

</form>

我使用CSS的布局方法如下...

My layout method using CSS is as follows...

form  {
    width: 500px;
}

form .input-row {
    display: block;
    width: 100%;
    height: auto;
    clear: both; 
    overflow: hidden; /* stretch to contain floated children */
    margin-bottom: 10px;
}

form .input-row label {
    display: block;
    float: left;
}

form .input-row input,
form .input-row select {
    display: block;
    width: 50%;
    float: right;
    padding: 2px;
}

这一切都很好，除了 select 元素（在Firefox中）不总是与我的其他输入元素相同的宽度。

This all aligns quite nicely, except my select element (in Firefox anyway) isn't always the same width as my other input elements. It generally is narrower by a few pixels.

我已尝试将宽度更改为像素大小（例如 200px ）但它没有改变。

I've tried changing the width to a pixel size (e.g. 200px) but it has not made a difference.

什么是最好的方法来获得这些都具有相同的宽度？我希望它不诉诸于我单独设置选择的宽度，或将它们放入表格。 。

What is the best way to get these to all have the same width? I hope it doesn't resort to me setting the select's width individually, or putting them into tables...

推荐答案

解决方案是为表单元素指定框模型，并且当您使用border-box时，浏览器通常会达成一致：

The solution is to specify box model for form elements, and browsers tend to agree most when you use border-box:

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

---

http://necolas.github.io/normalize.css/ =nofollow noreferrer> normalize.css 项目，聚集这些技巧。

---

There's normalize.css project that aggregates such tricks.

这篇关于在HTML中选择输入和文本输入 - 最佳方式使宽度相等？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！