Вопрос по html, css, html5, textbox, drop-down-menu – Выравнивание текста и выделение блоков по ширине в CSS?

81

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

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

Это сделало бы это, ты думаешь, верно? Нету. Поле выбора в Firefox на 6px короче. Смотрите скриншот.screenshot in firefox

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

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

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

Fixed in Firefox

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

chrome screenshot

FFFFFFFUUUUUUUUUUUU

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


Solution:

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

Код ниже, также установите высоту блоков на тот же размер и с отступом текста внутри блока, чтобы он выровнялся. Вам также нужно установить границу, поскольку 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'] указать те, к которым вы хотите применить.

Обратите внимание, что размер блока не поддерживается в IE7 (около 3% пользователей). И никогда не используйте: не - он не поддерживается в IE8, который составляет 20% пользователей :) Anonymous
размер коробки работает Pierre
Box-проклейкиdoes работать на IE8! Все эти годы я добавлял определенную ширину к & lt; select & gt; стиль ... GlennG
Да, CSS сводит меня с ума каждый день @ Скотт. :) zuallauz
Если вам нужен такой уровень точности, вы не будете счастливы как веб-дизайнер. Scott Saunders

Ваш Ответ

7   ответов
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, какYUI CSS Reset прежде чем пытаться сделать дизайн отлично выглядеть в нескольких браузерах.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededinput { padding-left: 5px; }Error: User Rate Limit Exceeded zuallauz
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededinput а такжеselectError: User Rate Limit Exceeded
2

<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 это исправление для поддержки браузеров

0

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

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

7

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

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

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

Explicitly set the border, padding and margin values to be the same for both elements A CSS reset stylesheet to be included before your own CSS stylesheets

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

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded zuallauz
Пытатьсяinput {text-indent: 5px;} Постскриптум<select>Error: User Rate Limit Exceeded
Error: User Rate Limit ExceededstartError: User Rate Limit Exceeded
Error: User Rate Limit Exceededpadding:0; margin:0; border:1px solid #000;Error: User Rate Limit Exceededinput { padding-left: 5px; }Error: User Rate Limit Exceeded zuallauz
3

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

select, input {
 border:0;
}
0

вы можете использовать следующее решение - также совместимое с 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.

Error: User Rate Limit ExceededlotError: User Rate Limit Exceeded

Похожие вопросы