Gibi çok basit bir form (görsel amaçlı) var...

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

Düzen benim yöntem CSS kullanarak şunlar var:

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;
}

Bu select benim eleman (Firefox zaten) her zaman input benim diğer elemanları aynı genişlikte değil oldukça güzel hizalar. Genellikle birkaç piksel daha dar.

Piksel boyutu (örneğin 200px) genişliğini değiştirmeyi denedim ama bir fark yarattı.

Tüm bunları elde etmek için en iyi yol aynı genişlikte nedir? select'width tek tek s veya tablo içine koyarak... . beni ayar çare yok umarım

Çözüm form elemanları için kutu modeli ve tarayıcılar border-box kullandığınızda en kabul eğilimindedir:

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

normalize.css toplamları bu tür hileler proje var.