Блог

Главная - Вопросы по программированию - сделайте выбор и ввод одинаковой высоты

сделайте выбор и ввод одинаковой высоты

#html #css

Вопрос:

Как сделать так, чтобы элементы выбора и ввода имели одинаковый размер? В приведенном ниже коде выбор на 1 пиксель выше, чем при вводе

 #boats, #timepicker {
  font-size: 2vw;
  width: 15vw;
  text-align: center;
  border: solid 3px black;
  padding: 1px 2px;
  
  
 -ms-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    margin:0;
} 
 <select id="boats" name="boats">
  <option disabled="" selected="" value="">Select Boat</option>
  <option value="Avrora">Avrora</option>
  <option value="Irlbach">Irlbach</option>
  <option value="Laura">Laura</option>  
</select>
<input id="timepicker" type="text" name="startTime">

Ответ №1:

Назначьте одинаковую высоту обоим input и select и используйте vertical-align для выравнивания двух элементов по вертикали.

 vertical-align:top;
height:20px;
 
 #boats, #timepicker {
  font-size: 2vw;
  width: 15vw;
  text-align: center;
  border: solid 3px black;
  padding: 1px 2px;
  
  /* Add this*/
  vertical-align:top;
  height:20px;
  
  
 -ms-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    margin:0;
} 
 <select id="boats" name="boats">
  <option disabled="" selected="" value="">Select Boat</option>
  <option value="Avrora">Avrora</option>
  <option value="Irlbach">Irlbach</option>
  <option value="Laura">Laura</option>  
</select>
<input id="timepicker" type="text" name="startTime">
Метки: