Тщетно пытаюсь выровнять базовые элементы формы

#html #css

#HTML #css

Вопрос:

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

Например, хотя текст в моих элементах ввода и кнопки легко выравнивается, их ограничивающие рамки очень странные.

В качестве надуманного примера:

 * {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  line-height: 1.5;
}

div {
  height: 24px;
  background: lightblue;
  overflow: hidden;
}

input,
button,
span {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  display: inline-block;
  font: inherit;
  padding: 0;
  margin: 0;
  height: 24px;
  border: 1px solid black;
}

div.large,
.large input,
.large button,
.large span {
  height: 48px;
}

 <div class="small">
text<input value="my test"><button>my test</button><span>me</span>text<br>
</div>
<br>
<div class="large">
text<input value="my test"><button>my test</button><span>me</span>text<br>
</div>

Как вы можете видеть, ограничивающий прямоугольник для некоторых элементов (я использую Chrome, последнюю версию) кажется довольно странным и непоследовательным.
Я хотел бы исправить эти проблемы и, что более важно, понять их.

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

Спасибо за любую помощь!

1. мне кажется немного неясным, чего вы пытаетесь достичь, не могли бы вы немного уточнить цель, которую вы пытаетесь достичь?, например, что предполагается сделать, как это должно выглядеть.

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

Ответ №1:

Вы можете исправить эту проблему, используя display: flex для этого диапазона и обернув его в div, который будет масштабироваться до родительского:

 * {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  line-height: 1.5;
}

div {
  height: 24px;
  background: lightblue;
  overflow: hidden;
}

input,
button,
span {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  display: inline-block;
  font: inherit;
  padding: 0;
  margin: 0;
  height: 24px;
  border: 1px solid black;
}

div.large {
  position: relative;
  display: flex;
  align-items: center;
}

div.large,
.large input,
.large button {
  height: 48px;
}

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="small">
text<input value="my test"><button>my test</button><span>me</span>text<br>
</div>
<br>
<div class="large">
  text<input value="my test"><button>my test</button><div style="border:1px solid;height:100%;display:flex;align-items:center;">me</div>text<br>
</div>
</body>
</html>

1. Для этого потребуется изменить структуру фактического html. В надуманном примере это несколько работает, но идея заключается в том, что пользователи могут просто использовать элементы, не делая ничего необычного. Я также отмечаю, что второй интервал был изменен на div. Невыполнение этого показывает, насколько странными становятся ограничивающие рамки. В идеале я бы получил некоторое представление о том, что на самом деле происходит и почему.