Как выровнять дочерний текстовый элемент по низу входных текстовых элементов - PullRequest
Новая
       32

Как выровнять дочерний текстовый элемент по низу входных текстовых элементов

2 голосов
/ 28 января 2020

Я создал элемент HTML для пользователей, чтобы вводить значения с плавающей запятой, и я разделил ввод на два элемента ввода, один для целого числа, а другой для десятичного числа. Я включаю десятичную точку в качестве текстового элемента между двумя входными текстовыми элементами, но она не выровнена по нижней части обоих входных элементов, и я не уверен, как решить эту проблему. Вот фрагмент моего кода: 

#whole {
  text-align: center;
  width: 25%;
  margin-top: 10px;
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing: border-box;
}
#decimal {
  text-align: center;
  width: 45%;
  margin-top: 10px;
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing: border-box;
}
#decimal_point {
  vertical-align: bottom;  /*align decimal point to bottom*/
}
<div>
       <input type=text maxlength=1 id=whole name=whole value=>
       <span id=decimal_point> . </span>
       <input type=text maxlength=3 id=decimal name=decimal value=>
    </div>

Я обновил код и получил эту проблему:

enter image description here

Ответы [ 3 ]

2 голосов
/ 28 января 2020

Вы можете использовать css vertical-align свойство элемента span. Вот так: 

.decimal-box span{
    vertical-align: bottom;  /*align decimal point to bottom*/
    line-height: 0.7; /* If desired, set line-height to push decimal point further down*/
}

#whole {
  text-align: center;
  width: 25%;
  margin-top: 10px;
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing: border-box;
}

#decimal {
  text-align: center;
  width: 45%;
  margin-top: 10px;
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing: border-box;
}
<div class="decimal-box">
     <input type="text" maxlength=1 id="whole" name="whole" value="">
     <span> . </span>
     <input type="text" maxlength="3" id="decimal" name="decimal" value="">
 </div>
0 голосов
/ 28 января 2020

Итак, после проб и ошибок при выравнивании по вертикали элемента span (десятичной точки) я нашел лучшее решение, которое, похоже, подойдет для моего приложения. Я приложил фрагмент. 

decimal-box span{
    vertical-align: sub;  /* align decimal point to bottom */
}

#whole {
  text-align: center;
  width: 25%;
  margin-top: 10px;
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing: border-box;
}

#decimal {
  text-align: center;
  width: 45%;
  margin-top: 10px;
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing: border-box;
}
<div class="decimal-box">
     <input type="text" maxlength=1 id="whole" name="whole" value="">
     <span> . </span>
     <input type="text" maxlength="3" id="decimal" name="decimal" value="">
 </div>

Возможно, вы не сможете заметить разницу при запуске сниппета, но вот изображение, которое работает для моего приложения:

enter image description here

0 голосов
/ 28 января 2020

вы можете установить его в div с id и вместо span, 

#whole {
  text-align: center;
  width: 25%;
  margin-top: 10px;
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing: border-box;
}
#decimal {
  text-align: center;
  width: 45%;
  margin-top: 10px;
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing: border-box;
}
#dpoint{
  margin-top: 20px;
  padding-left: 5px;
  padding-right: 5px;

}
.wrap{
  display: inline-flex;
}

  <div class="wrap">
    <input type=text maxlength=1 id=whole name=whole value=>
    <div id="dpoint"> . </div>
    <input type=text maxlength=3 id=decimal name=decimal value=>
 </div>

или вы можете добавить стиль в html в элементе div и оставить свой css как есть. 

  <div style="display: inline-flex;">
    <input type=text maxlength=1 id=whole name=whole value=>
    <div style='margin-top: 20px; padding-left: 5px; padding-right: 5px;'> . </div>
    <input type=text maxlength=3 id=decimal name=decimal value=>
 </div>
...