Как выровнять элементы ввода HTML?

Я надеюсь найти ресурс для выравнивания элементов ввода на странице HTML. Мне трудно заставить элемент выбора и текстовое поле иметь одинаковую ширину даже при использовании атрибута стиля ширины, и это еще сложнее в разных браузерах. Наконец, файловые входы кажутся невозможными для кросс-браузера одинаковой ширины. Есть ли хорошие руководства или советы для достижения этого? Возможно, есть некоторые атрибуты CSS по умолчанию, которые я должен установить.


html css css-reset
person Greg    schedule 07.10.2008    source источник
comment
@Jeremy, хотя можно утверждать, что html и css не являются строго «программированием», но это, безусловно, что-то чертовски близкое. Я также предполагаю, что огромное количество людей на этом сайте делают это как часть своей повседневной работы.   -  person Gareth Davis    schedule 17.10.2009
comment
Эта проблема возникает при рендеринге в стандартном режиме, удалите тег doctype и посмотрите на разницу. Проверьте этот вопрос, который решил проблему для меня: элемент"> stackoverflow.com/questions/5627110/   -  person pauloya    schedule 30.08.2011

Ответы (9)


arrow_upward
17
arrow_downward

Я проверил это в Internet Explorer 7, Firefox 3 и Safari/Google Chrome. Я определенно вижу проблему с <select> и <input type="file">. Мои выводы показали, что если вы стилизуете все входные данные одинаковой ширины, <select> будет примерно на 5 пикселей короче во всех браузерах.

Использование скрипта сброса CSS Эрика Мейера не помогает. проблема, однако, если вы просто сделаете свои <select> inputs на 5 пикселей шире, вы получите очень хорошее (хотя и не идеальное) выравнивание в основных браузерах. Единственное, что отличается, это Safari/Google Chrome, и он кажется на 1 или 2 пикселя шире, чем все остальные браузеры.

Что касается <input type="file">, у вас нет большой гибкости в отношении стиля. Если вам подходит JavaScript, вы можете реализовать метод , показанный в quirksmode, чтобы добиться больший контроль над стилем элемента управления загрузкой файлов.

См. мой полный рабочий пример ниже в XHTML 1.0 Strict для типичной формы с постоянной шириной ввода. Обратите внимание, что это не использует трюк со 100% шириной, указанный здесь другими, потому что у него та же проблема с несовместимой шириной. Кроме того, для отображения формы не используются таблицы, поскольку таблицы следует использовать только для табличных данных, а не для макета.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Example Form</title>
  <style type="text/css">
    label,
    input,
    select,
    textarea {
      display: block;
      width: 200px;
      float: left;
      margin-bottom: 1em;
    }
    
    select {
      width: 205px;
    }
    
    label {
      text-align: right;
      width: 100px;
      padding-right: 2em;
    }
    
    .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <form action="#">
    <fieldset>
      <legend>User Profile</legend>
      <label for="fname">First Name</label>
      <input id="fname" name="fname" type="text" />
      <br class="clear" />

      <label for="lname">Last Name</label>
      <input id="lname" name="lname" type="text" />
      <br class="clear" />

      <label for="fav_lang">Favorite Language</label>
      <select id="fav_lang" name="fav_lang">
        <option value="c#">C#</option>
        <option value="java">Java</option>
        <option value="ruby">Ruby</option>
        <option value="python">Python</option>
        <option value="perl">Perl</option>
      </select>
      <br class="clear" />

      <label for="bio">Biography</label>
      <textarea id="bio" name="bio" cols="14" rows="4"></textarea>
      <br class="clear" />
    </fieldset>
  </form>
</body>

</html>

person cowgod    schedule 08.10.2008
comment
Я думаю, что несоответствие сводится к внутреннему стилю элементов, текстовые поля имеют внутреннее заполнение, которое отличается от типов ввода, поэтому вам, по сути, необходимо учитывать это, либо сбросив все стили в начале вашего css, либо добавив /вычитание 5px из других элементов. Что касается согласованности между браузерами, удачи с этим, очень распространенная жалоба, которая сводится к программистам браузеров, ничего особенного не нужно делать, кроме бойкота всех браузеров, кроме одного: D (я голосую за Firefox) - person andyface; 17.11.2009
comment
Я обнаружил, что почти каждый основной браузер в Windows будет отображать элемент выбора на 8 пикселей уже, чем текстовый ввод или текстовая область. Поэтому я соответственно стилизовал, например. ввод, текстовая область { ширина: 180 пикселей; } выберите { ширина: 188 пикселей; } - person Olly Hodgson; 17.11.2009

arrow_upward
13
arrow_downward

Я обычно помещаю их в ячейку div или таблицы (ужас! Я знаю) той ширины, которую хочу, затем устанавливаю для select и input style:width значение 100%, чтобы они заполняли div/ячейку, в которой они находятся.

person Ron Savage    schedule 07.10.2008
comment
Я думал, что это очевидное решение. - person Robin Rodricks; 02.05.2009
comment
Не работает, когда ввод переполняет свои границы <td> в следующую ячейку. - person Ian Boyd; 20.06.2012

arrow_upward
2
arrow_downward

Я обнаружил, что если вы установите границы и отступы элементов select и input равными 0, они будут одинаковой ширины. (Проверено на Chrome 14, Firefox 7.0.1, Opera 11.51, IE 9)

Установка границы/отступа в 1 пиксель для элементов выбора и ввода делает элемент ввода на 2 пикселя шире. Например:

<form class="style">
    <input name="someInput" />
    <select name="options">
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
    </select>
</form>

.style select {
    width: 100px;
    padding: 1px;
    border: 1px solid black;
}
.style input {
    width: 96px; /* -2 px for 1px padding(1px from each side) and -2px for border
    (select element seems to put border inside, not outside?) */
    padding: 1px;
    border: 1px solid black;
}
person Dalius    schedule 22.10.2011

arrow_upward
1
arrow_downward

Помимо ширины, я бы также установил границы и поля, они могут влиять или не влиять на ваши элементы управления. Что-то вроде этого может помочь:

input, select {
    width: 100px;
    margin: 0px;
    border: 1px solid;
}

У Рона тоже есть хорошая идея.

person Matthew Scharley    schedule 07.10.2008
comment
Вы имеете в виду ввод, выберите { случайно? В противном случае вы нацеливаетесь на выбор, который является дочерним элементом ввода:) - person Olly Hodgson; 17.11.2009
comment
Конечно, мой плохой. Хотя результаты этого выглядели бы интересно. - person Matthew Scharley; 17.11.2009

arrow_upward
0
arrow_downward

Вы начинаете свои файлы CSS с некоторыми базовыми настройками? Может быть полезно отключить отступы и поля для всех элементов. Я не проверял, может ли это повлиять на элементы select/input.

Вот пример сброса CSS от Эрика Мейера:

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

person Dave Rutledge    schedule 07.10.2008

arrow_upward
0
arrow_downward

Файловые входы могут принципиально различаться в разных браузерах и определенно не позволяют многого настраивать, что может раздражать, но я также понимаю, почему это связано с точки зрения безопасности. Например, попробуйте изменить текст кнопки «Обзор», которая появляется в большинстве браузеров, или сравните ввод файла в Safari с другими браузерами...

person mmacaulay    schedule 07.10.2008

arrow_upward
0
arrow_downward

Я не думаю, что идея Рона Рона работает...

прецедент:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <link href="styles/reset.css" rel="stylesheet" type="text/css"/>

    <style type="text/css">
        input, select{
            width: 100%;
        }
    </style>
</head>
<body>

<div style="width: 200px;">
    <input type="text">
    <select>
        <option>asdasd</option>
        <option>asdasd</option>
    </select>

</div>

</body>
</html>

Это приводит к тому, что ввод становится на несколько пикселей шире, чем выбор (вероятно, это зависит от ОС). Я не уверен, что это может быть достигнуто, даже с трюком +5px, поскольку стиль выбора, похоже, зависит от ОС (по крайней мере, темы Windows).

person AlfaTeK    schedule 17.11.2009

arrow_upward
0
arrow_downward

Если вам срочно нужно { width: 100%; } и ширина не указана в пикселях, тогда jQuery вам в помощь:

$(function () {
    var allSelects = $('input[type="text"], textarea');
    allSelects.css('width', (allSelects.width()-6)+'px');
}

-6 пикселей лучше всего подходят для меня (FF9), редактируйте, как считаете нужным.

person Slawa    schedule 02.02.2012

arrow_upward
0
arrow_downward

Это связано с тем, что при вводе граница и отступы добавляются к ширине (как и для большинства других элементов). С помощью ‹select› граница и отступы включаются в ширину, как и в старом режиме IE quirks.

Вы можете обойти это, увеличив ширину, чтобы учесть это:

input  { width: 200px; padding: 10px; border-width:5px; }
select { width: 230px; padding: 10px; border-width:5px; }

Или (если вы можете положиться на поддержку браузера) вы можете использовать новое свойство CSS3 box-sizing, чтобы заставить их вести себя согласованно и рисовать отступы и границы за пределами ширины элемента:

input, select {
  width: 200px;
  padding: 10px;
  border-width:5px;
  -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: content-box;    /* Firefox, other Gecko */
  box-sizing: content-box;         /* Opera/IE 8+ */
}

В качестве альтернативы вы можете установить для box-sizing значение border-box, чтобы входные данные вели себя как выборки, с отступами, нарисованными внутри ширины поля.

Протестировано в Chrome, IE8, FF

person Jim    schedule 13.06.2012