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

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

0 голосов
/ 19 сентября 2018

Я пытаюсь создать форму с текстовыми полями ввода и отправить поля, которые идеально выровнены и равны по размеру.Однако по какой-то причине кнопка отправки не на несколько пикселей, и я не могу понять причину.

Элементы имеют одинаковый размер, и я попытался удалить поля и отступы, но не смог решить проблему.

Я создал простое jfiddle, чтобы проиллюстрировать мою проблему.https://jsfiddle.net/peacefulgoldfish/d50h7n9p/26/

Ценю любую помощь и совет по этому вопросу.

html 

<div>
<form>
<input>
<br>
<input>
<br>
<input type="submit">
</form>
</div>

css 

#div{

  width:100%;
}

form{

  text-align: center;

}

input {
   box-sizing: border-box;
  height: 10%;
  width: 50%;

}

Ответы [ 6 ]

0 голосов
/ 19 сентября 2018

Размер коробки - единственное правильное решение этой проблемы.Мое личное предложение - использовать box-sizing: border-box; для всех элементов.

Как это:

  • {box-sizing: border-box;}

Здесь * выбирает все элементы в текущем DOM. 

* {
 box-sizing: border-box;
}
#form {
  text-align: center;
}

input {
  height: 10%;
  width: 50%;
}
<body>
    <form>
      <input>
      <br>
      <input>
      <br>
      <input type="submit">
    </form>
</body>
0 голосов
/ 19 сентября 2018

Обновите ваш CSS, может быть, это может помочь вам. 

#div{

  width:100%;
}

form{

  text-align: center;

}

input {
    height: 10%;
    width: 50%;
    display: block;
    margin: 0 auto;

}
body{
  box-sizing: border-box;
}
0 голосов
/ 19 сентября 2018

Вы можете достичь, используя flex 

form{

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-items:center

}

Но вам придется иметь дело с дополнительным пространством, если оно вам не нужно

0 голосов
/ 19 сентября 2018

Вот оболочка 

div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
<div>

<form>
<input><br/>
<input><br/>
<input type="submit">
</form>
</div>
0 голосов
/ 19 сентября 2018

Используйте некоторые значения вместо%, например, "10 pt" или "10 px".Определение размера в виде точек или пикселей лучше, чем относительный размер экрана (%).

0 голосов
/ 19 сентября 2018

Вы должны указать размер блока ввода, чтобы сделать их равными по ширине.Вот как должен выглядеть ваш обновленный CSS: 

div {
  font-size:0;
}
#form{  
  text-align: center;
  font-size: 14px;
}
input {
  height: 10%;
  width: 50%;
  box-sizing: border-box;
}
...