Проблема с использованием CSS для указания ширины кнопки отправки формы, равной ширине якоря - PullRequest
Новая
       36

Проблема с использованием CSS для указания ширины кнопки отправки формы, равной ширине якоря

4 голосов
/ 01 июня 2011

У меня есть базовое меню, которое состоит из некоторых элементов div и якорей.Однако в некоторых случаях вместо привязки мне нужно использовать форму <input type="submit"> (это шаблон для мобильных телефонов, поэтому я не могу использовать здесь javascript, мне нужно использовать кнопку отправки, которая будет отправлять данные формы).

Моя проблема, с которой я боролся в течение нескольких часов, состоит в том, чтобы получить входной сигнал такой же ширины, как якоря.Они оба установлены на ширину: 50%;однако вход немного короче, чем якоря.Только минимально, но это все еще очевидно.Я понятия не имею, почему это происходит.Кто-нибудь может помочь с этим?Мой упрощенный код приведен ниже, и проблема воспроизводима в настольных Chrome и Firefox, а также в различных мобильных телефонах, на которых я тестировал. 

<html>
<head>
    <style>
        a.btn_bigfake{
            display:block;
            width:50%;
            margin: 0px auto 5px auto;

            background:#f5f5f5;
            border:4px solid #282726;
            text-align: center;
        }

        input.btn_bigfake{
            width:50%;
            display:block;
            margin: 0px auto 5px auto;

            background:#f5f5f5;
            border:4px solid #282726;
            text-align: center;
            padding:0;
        }
        div{width:100%;}
    </style>
</head>
<body style="width:100%; margin:0; padding:0;">
    <div><a href="#" class="btn_bigfake">1. anchor</a></div>
    <div><a href="#" class="btn_bigfake">2. anchor</a></div>
    <div><input type="submit" class="btn_bigfake" value="3. input"/></div>
</body>
</html>

Ответы [ 2 ]

6 голосов
/ 01 июня 2011

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

Чтобы решить вашу проблему, вам нужно поместить имя класса в DIV, окружающий INPUT, а затем применить некоторые пользовательские стили для ввода, чтобы он заполнил DIV.Вы можете эмулировать границу, используя background + padding в DIV.

Смотрите здесь: http://jsfiddle.net/jMTT3/2/

0 голосов
/ 01 июня 2011

Это связано с тем, как width;50%; вычисляется, когда граница также существует.Мне всегда приходилось добавлять несколько пикселей ширины к <input>, чтобы он соответствовал другим.Или вы можете установить содержащиеся в нем элементы div width:50;, а привязку и ввод width: 100%'.

...