Выравнивание текста и выбор прямоугольников с одинаковой шириной в CSS?

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

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            input, select {
                width: 200px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br>
        <select>
            <option>123</option>
        </select>
    </body>
</html>

Что бы вы думали, верно? Неа. Поле выбора в 6 раз меньше, чем в Firefox. См. Снимок экрана.

Итак, давайте отредактируем код и сделаем два стиля.

<style type="text/css">
    input {
        width: 200px;
    }
    select {
        width: 206px;
    }
</style>

Хорошо, что работает!

О, подождите, лучше проверите в Chrome...

Может кто-нибудь сказать мне, как выстроить их во всех браузерах? Почему я не могу просто сделать ширину: 200 пикселей на всех, почему все браузеры отображают ее по-другому? Кроме того, пока мы находимся в этом вопросе, почему текстовое поле и поле выбора имеют разные высоты? Как мы получаем их на одну и ту же высоту? Пробовали высоту и высоту линии. Нет, нет.

Решение:

Хорошо, я нашел решение с некоторой помощью из ответов ниже. Ключ состоит в том, чтобы использовать свойство box-size: border-box, поэтому, когда вы указываете ширину, которая включает границу и дополнение. См. отличное объяснение здесь. Тогда браузер не сможет его заполнить.

Код ниже, также установите высоту ящиков одинакового размера и отступом текст внутри поля, чтобы он выравнивался. Вам также нужно установить границу, поскольку Chrome имеет очень странную перспективную рамку, которую он использует для выбранных боксов, которые выкинут выравнивание. Это будет работать для сайтов HTML5 (например, поддержка IE9, Firefox, Chrome, Safari, Opera и т.д.).

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            input, select {
                width: 200px;
                border: 1px solid #000;
                padding: 0;
                margin: 0;
                height: 22px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }
            input {
                text-indent: 4px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br>
        <select>
            <option>123</option>
            <option>123456789 123123123123</option>
            <option>123456789 123123123123 134213721381212</option>
        </select>
    </body>
</html>

Только одно окончательное предупреждение, которое вы, возможно, не хотите включать в себя кнопки ввода, флажки и т.д., используйте input:not([type='button']), чтобы не применять его к определенным типам или использовать input[type='text'], input[type='password'], чтобы указать те, которые вы хотите применить к.

Ответ 1

Это связано с тем, что элемент <input type="text" /> имеет немного другой стиль по умолчанию для элемента <select>, например. границы, отступы и значения полей могут отличаться.

Вы можете наблюдать эти стили по умолчанию с помощью инспектора элементов, такого как Firebug для Firefox или встроенного для Chrome. Более того, эти таблицы стилей по умолчанию отличаются от браузера к браузеру.

У вас есть два варианта:

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

Я бы пошел с вариантом 1. потому что вариант 2. требует большой работы, и вы получите массу ненужного CSS. Но некоторые веб-разработчики предпочитают начинать с нуля и иметь полный контроль.

Ответ 2

Это приблизит вас, но уровень точности почти невозможен.

<div style="width: 200px"><input type="text" style="width: 100%; margin: 0; padding: 0" /></div>
<div style="width: 200px">
    <select id="Select1" style="width: 100%; margin: 0; padding: 0">
        <option>1</option>
    </select>
</div>

Ответ 3

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

<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            input, select {
                margin: 0;
                padding: 0;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br />
        <select>
            <option>123</option>
        </select>
    </body>
</html>

Мне лично нравится использовать минимальную таблицу стилей CSS reset, например YUI CSS Reset, прежде чем пытаться сделать дизайн великолепным в нескольких браузеры.

Ответ 4

Добавьте класс как к выбранным, так и к входным тэгам, то есть:

<input class='custom-input'/>
<select class='custom-input'></select>

затем измените css ниже, чтобы он соответствовал вашему дизайну:

.custom-input {
        width:140px;
        border:1px solid #ccc;
        margin:1px;
        padding:3px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -ms-box-sizing:content-box;
        -moz-box-sizing:content-box;
        -webkit-box-sizing:content-box;
        box-sizing:content-box;
    }

obvs это исправление для поддержки браузеров

Ответ 5

Если вы используете таблицы 4 входа, вы можете использовать следующее решение - также совместимое с ie7:

<tr style="width:1px;"><td style="width:inherit;position:relative;">
    <select style="width:100%;"> 
    </select> 
</td></tr>
<tr><td>
    <input type="text" style="width:150px;"/>
</td></tr>

Таким образом, ширина ячейки таблицы будет фиксирована до ширины входа,

Таким образом, выбор всегда будет занимать оставшуюся ширину и идеально сочетаться с d-входом.

Ответ 6

Попробуйте удалить границы по умолчанию из обоих элементов:

select, input {
 border:0;
}

Ответ 7

Да, очень расстраивающе. Тем не менее, у меня никогда не было проблем с этим, "пока я не поставлю" <! DOCTYPE html > "; в верхней части моей HTML-страницы. Моя веб-страница была правильно отображена на всех платформах, которые я мог тестировать, пока не поместил этот тег в начало моего документа.

В то время как эта "настоящая спецификация", кажется, является источником этих проблем выравнивания. FWIW, я использую элементы HTML5, встроенный CSS и т.д., Все без этого тега, чтобы указать HTML5. YMMV.