CSS - Точная высота и выравнивание кнопки и текстового поля ввода

Ответ 1

Я бы предложил попробовать стиль родительского элемента спаривания input/button (a fieldset в моем примере), чтобы дать общий font-size и font-family, а затем использовать em измерения для размеров узора/отступов/полей для дочерних элементов. Идеально стилизовать все дочерние элементы с тем же CSS.

С учетом следующей надписи:

<form action="#" method="post">
    <fieldset>
        <label for="something">A label for the text-input</label>
        <input type="text" name="something" id="something" />
        <button>It a button!</button>
    </fieldset>
</form>

Я бы предложил нечто подобное, но приспособился к вашему конкретному дизайну, к следующему CSS:

fieldset {
    font-size: 1em;
    padding: 0.5em;
    border-radius: 1em;
    font-family: sans-serif;
}

label, input, button {
    font-size: inherit;
    padding: 0.2em;
    margin: 0.1em 0.2em;
    /* the following ensures they're all using the same box-model for rendering */
    -moz-box-sizing: content-box; /* or `border-box` */
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

JS Fiddle demo.

fieldset {
    font-size: 1em;
    padding: 0.5em;
    border-radius: 1em;
    font-family: sans-serif;
    border-width: 0;
}

label, input, button {
    font-size: inherit;
    padding: 0.3em 0.4em;
    margin: 0.1em 0.2em;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    border: 1px solid #f90;
    background-color: #fff;
}

input {
    margin-right: 0;
    border-radius: 0.6em 0 0 0.6em;
}
input:focus {
    outline: none;
    background-color: #ffa;
    background-color: rgba(255,255,210,0.5);
}
button {
    margin-left: 0;
    border-radius: 0 0.6em 0.6em 0;
    background-color: #aef;
}
button:active,
button:focus {
    background-color: #acf;
    outline: none;
}

JS Fiddle demo.

Хотя вышеизложенное прекрасно работает в Chromium 12.x и Opera 11.5 (Ubuntu 11.04), Firefox, кажется, показывает дополнительный пиксель или два в последней демонстрации.

Ответ 2

Я тянул свои волосы часами, пытаясь добиться этого. После много исследований и экспериментов, здесь рецепт решения проблемы OP в (по крайней мере, в современных версиях) Chrome, Firefox, IE, Opera и Safari:

• Используйте тот же CSS, что и для модели окна для всех типов узлов, которые вам нужно выровнять (кнопка, вход, выбор);
• DO указать границу явно (или, по крайней мере, ее ширину);
• НЕ явно указывать высоту.

Да, это все. Здесь самый минималистический CSS, который дает желаемые результаты:

select, input, button {
    border-width: 0px;
}

Если вам нужен дополнительный стиль, не стесняйтесь добавлять цвет, отступы и поля - все будет хорошо. Но независимо от того, что вы делаете, НЕ указывайте высоту явно. Это единственный выключатель, потому что каждый браузер вычисляет высоту по-разному; некоторые оставят лишний пиксель или два над выбором, а не кнопкой, некоторые оставят их выше кнопки, а не выберите, а некоторые будут работать, как ожидалось.

Для записи Chrome кажется наиболее последовательным в этом отношении (то есть, если вы указали высоту), но опять же, кто заботится.

Ответ 3

Я думаю, что это очень пуленепробиваемый:

http://codepen.io/herrfischer/pen/pbkyoJ

На обоих элементах просто используйте:

display: inline-block;
padding: 10px 15px;
font-size: 20px;
border-radius: 0;
-webkit-appearance: none;
border: 1px solid transparent;

И используйте "normalize.css" - все. Выглядит неплохо и на iPhone:

Ответ 4

Я проверил множество источников в WEB, как сделать это лучшим, кросс-браузерным, не зависящим от темы. Надеюсь, у меня есть решение, бит не 100% (его нужно обрезать вертикальной надстройкой CSS). Моя проблема заключалась в , чтобы иметь метку и ввод текста с одинаковой шириной и компактностью.

Желаемый результат: Решение, которое я нашел в нескольких экспериментах, описано в моем блоге: http://vasvadev.blogspot.cz/2013/02/css-exact-same-height-and-alignment-of.html

Решение CSS:

div.lf-ui-label {
  margin: 0px;
  font-size: inherit;
  font-weight: bold;
  background-color: #CCCCCC;
  border-width: 0px;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  padding-top: 4px;
  padding-bottom: 4px;
}
div.lf-ui-label + input.lf-ui-form-item {
  padding: 5px 10px 5px 10px;
  margin: 0px 0px 0px -10px;
  font-size: inherit;
  background-color: #2b55a8 !important;
  vertical-align: middle;
  border-width: 0px;
}
input.lf-ui-form-item {
  background-color: #3b3b3b;
  font-size: inherit;
  padding: 4px 7px 4px 7px;
  font-weight: bold;
  border: none 0px;
  outline: none;
}

HTML:

<div style="padding:10px; font-family: Calibri; font-size: 14px;">
   <div class="lf-ui-label" 
    style="width:25%; padding-left: 10px;">Field text 14px&nbsp;</div><input 
    class="lf-ui-form-item" type="text" id="fr" name="fr" value="some value"      style="width:71%" />
</div>
<div  style="padding:10px; font-family: Calibri; font-size: 14px;">
  Field text <input class="lf-ui-form-item" type="text" value="some other value"/>
</div>

Мой экспериментальный код разделяет JSFIDDLE: css-exact-same-height-and-alignment-of.html

Ответ 5

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

Я нахожу, что этот код выполняет работу:

float: left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height: 33px;

Я обновил Fiddle - https://jsfiddle.net/p9maozk2/

Ответ 6

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

CSS reset действительно имеет фундаментальное значение для нормализации различий между браузерами (особенно при работе с формами).

Ответ 7

Для IE: вы можете стилизовать вещи по-разному, используя условные таблицы стилей:

<!--[if lt IE 7]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="ie7e" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->

Итак, вы должны написать:

.ie6 .my-button-class {
  //
}

Ответ 8

Другой вариант - использовать Bootstrap. Я решаю эту проблему, назначая класс " input-group " div, который оборачивает ввод и кнопку /s.

Ответ 9

В 2019 году вы хотите использовать CSS Grid для ваших форм, даже если у них только один вход и одна кнопка.

Это экономит много боли.

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

Внешний контейнер может быть form, CSS для этого display: grid; grid-template-rows: 2em; grid-template-columns: 1fr auto; display: grid; grid-template-rows: 2em; grid-template-columns: 1fr auto;

На входе должна быть метка, которую я буду считать скрытой. Таким образом, CSS для ввода имеет grid-column: 1; height: 100%; grid-column: 1; height: 100%; кнопка имеет grid-column: 2; height: 100% grid-column: 2; height: 100%

Вы будете делать свои собственные вещи с полями, фонами, отступами, границами, радиусом границ и тому подобным.

Главное, чтобы кнопка выровнялась со входом, делается для строки сетки, имеющей фиксированную высоту в ems, или другого разумного адаптивного устройства, а вход и кнопка устанавливаются на высоту 100%.

Я не нашел ни одного из приведенных выше ответов, чтобы получить такой же лаконичный и управляемый код, как опция CSS Grid, которая работает для меня в Firefox, Chrome и браузере на основе Webkit.

Обратите внимание, что если вы используете CSS Grid, то вам нужно точно div элементы div нулем в вашей форме, однако, если вы используете поля, вам может потребоваться настроить display: content как CSS Grid, не работает с fieldset.

Ответ 10

Любой, кто пытался сделать это сейчас, обнаружил, что это решение, похоже, работает. Попробуйте добавить:

  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;

на ваш текущий css на обоих элементах, которые все равно оставят их слегка смещенными, а затем поэкспериментируйте с верхним отступом в смещенном элементе. Я нашел это:

padding-top: 2px;

работал на меня.

Ответ 11

Используйте фоновый div с изображением для ввода. Это намного проще поддерживать последовательно. Кроме того, абсолютное позиционирование полезно для такого типа ситуаций.

edit: Я написал этот ответ 5 лет назад, теперь есть лучшие способы.

Ответ 12

.sdiv {
padding-top: 33px;
padding-left: 33px;
height: 123px;
border: 1px dotted red;
border-radius: 7px;
background-color: Black;
}

.sbtn {
float:left;
height:24px;
width: 24px;
padding: 3px 0 0 0;
border:none;
margin-top: 14px;
background-color: white;
}

.stxt {
width: 180px;
height:22px;
float:left;
border:none;
padding-left:3px;
margin-top: 14px;
}

<div class="sdiv">
<form action="/">

<input class="stxt" type="text" placeholder="Search..." value="">

<button class="sbtn" type="submit">
<svg xmlns="http://www.w3.org/2000/svg" role="icon" viewBox="0 0 18 18" width="18" height="18">
<path fill-rule="evenodd" d="M 12.864 11.32 h -0.813 l -0.288 -0.277 A 6.66 6.66 0 0 0 13.38 6.69 a 6.69 6.69 0 1 0 -6.69 6.69 a 6.66 6.66 0 0 0 4.354 -1.617 l 0.278 0.288 v 0.813 L 16.467 18 L 18 16.467 l -5.136 -5.146 Z m -6.174 0 a 4.625 4.625 0 0 1 -4.632 -4.63 A 4.625 4.625 0 0 1 6.69 2.058 a 4.625 4.625 0 0 1 4.63 4.632 a 4.625 4.625 0 0 1 -4.63 4.63 Z" />
</svg>
</button>

</form>
</div>