#html #css #google-chrome #firefox #vertical-alignment
#HTML #css #google-chrome #firefox #выравнивание по вертикали
Вопрос:
Этот пример отлично работает в Chrome, но работает не так, как ожидалось, в Firefox.
Мы используем IBM BPM для создания веб-приложений на основе форм. Мы не можем изменять html-коды в BPM. Так что мы должны сделать это с помощью CSS. Извините: / Как я могу решить эту проблему с помощью css?
textarea {
padding: 10px 0px;
height: 150px;
}
.form-control {
display: block;
/* Remove this line */
}
.alignJustify>.layoutSec.hChild>.layoutCell {
display: table-cell
}
.layoutSec.valignTop>.layoutCell {
vertical-align: baseline
}
.CoachView_invisible {
visibility: hidden !important
}
<div class="alignJustify">
<div class="layoutSec valignTop hChild">
<div class="layoutCell">
<div>
Label
<div class="input">
<p id="input-readonly">
</p>
</div>
</div>
</div>
<div class="layoutCell">
<div>
<div class="input">
<textarea class="form-control" aria-multiline="true">Content</textarea>
</div>
</div>
</div>
</div>
</div>
Минимальным примером может быть:
div {
display: table-cell;
outline: 1px solid;
}
textarea {
display: block;
min-height: 150px;
padding: 10px 0px;
}
<div>
Label
</div>
<div>
<textarea>Content</textarea>
</div>
Отображаемые результаты:
Ответ №1:
Вам нужно сопоставить отступы в текстовой области и в метке. По вертикали вы должны выровняться по верху.
textarea {
padding: 10px 0px;
height: 150px;
}
.form-control {
display: block;
/* Remove this line */
}
.layoutSec.valignTop .layoutCell {
display: inline-block;
vertical-align: top;
}
.layoutSec.valignTop .layoutCell:first-child {
padding-top: 10px;
}
.CoachView_invisible {
visibility: hidden !important
}
<div class="alignJustify">
<div class="layoutSec valignTop hChild">
<div class="layoutCell">
<div>
Label
<div class="input">
<p id="input-readonly">
</p>
</div>
</div>
</div>
<div class="layoutCell">
<div>
<div class="input">
<textarea class="form-control" aria-multiline="true">Content</textarea>
</div>
</div>
</div>
</div>
</div>
Комментарии:
1. Что ж, это отличное решение, но у нас разные компоненты в качестве входных данных, которые имеют разные размеры отступов. Если нет способа получить тот же результат в Firefox без заполнения и с помощью va: baseline, тогда я сделаю так, чтобы все компоненты имели одинаковый размер заполнения.
2. Выравнивание работает, но когда вы добавляете один элемент на 10 пикселей, вам также нужно добавить второй. В вашем исходном вопросе была добавлена текстовая область.