Подтвердить что ты не робот

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

Использование сценария сброса Эрика Мейера для CSS не поможет решить эту проблему, однако, если вы просто увеличите размер <select> 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>

Ответ 2

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

Ответ 3

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

Помещение границы 1px/отступов на элементах выбора и ввода делает элемент ввода на 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;
}

Ответ 4

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

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

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

Ответ 5

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

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

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

Ответ 6

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

Ответ 7

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

тестовый пример:

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

Ответ 8

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

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

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

Ответ 9

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

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

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

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

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+ */
}

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

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