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

Question

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

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

Кто-нибудьесть какие-либо советы о том, как этого добиться.

Просто как быстрый пример того, чего я пытаюсь достичь: новая главная страница Google.После начала ввода автозаполнение запускается, и окно поиска перемещается вверх с помощью синей кнопки, идеально выровненной по текстовому полю.Он отлично работает в разных браузерах, но размечен в таблице.Значит ли это, что это может быть лучшим способом достижения этого?

Answer 1

Я бы предложил попробовать стилизовать родительский элемент для пары input / button (в моем примере это 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's 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 .

<ч /> После разъяснения, что это должно воспроизвести / воспроизвести стиль присоединенной к Google кнопки ввода / отправки текста:

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, кажется, показывает дополнительный пиксель или два в последней демонстрации.

Answer 2

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

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

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

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

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

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

Answer 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:

Answer 4

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

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

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

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

Answer 5

Я проверил много источников в 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-точно-же-высота-и-alignment-of.html

Answer 6

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

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

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

padding-top: 2px;

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

Answer 7

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

Это избавляет от многих проблем.

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

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

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

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

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

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

Answer 8

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

Answer 9

.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>

Всем отличных ответов!Но ни один из них не был тем, что я искал ...

Я получил больше удовлетворения от более простого подхода:

Answer 10

Для 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 {
  //
}