Кнопка CSS не может быть нажата во всем - PullRequest
Новая
       8

Кнопка CSS не может быть нажата во всем

1 голос
/ 28 июня 2010

Пожалуйста, посмотрите на ЭТУ страницу.

Пожалуйста, введите случайные данные и нажмите на края кнопки для отправки.

ПРОБЛЕМА: Я не могу нажать кнопку по краям.

ЦЕЛЬ: Я хочу расширить область, доступную для нажатия, на всю кнопку.

Я думаю, что должен представить это.Но я не уверен, где и как это сделать.

Код, который я использую для кнопки: 

<?php echo $form->submit('Submit', array('class' => 'submit_input', 'div' => array('class' => 'stndrd_btn', 'style' => 'margin-top:20px;'))); ?>

Спасибо и хорошего дня

Ответы [ 2 ]

2 голосов
/ 28 июня 2010

Какую библиотеку / фреймворк вы используете для создания форм? Размещенный вами код мало что нам говорит о сгенерированном HTML.

В любом случае. Если вы осмотрите DOM с помощью Firebug или чего-то подобного, вы увидите, что элемент кнопки не покрывает все визуальное пространство.

Глядя на ваш CSS (global_style.css), я вижу, что ширина этой кнопки жестко задана в 131 пикселе: 

.submit_input {
    color:#FFF;
    margin:0 auto;
    text-align:center;
    font-size:14px;
    font-weight:bold;
    background:none;
    border:none;
    width:131px;
    height:22px;
    padding-top:6px;
    cursor:pointer;
}

Элемент, который обертывает фактическую кнопку (и показывает курсор визуального указателя и фоновое изображение), имеет ширину 140 пикселей и высоту 30 пикселей.

Теперь вы не хотите снова жестко кодировать эти значения для кнопки, вы хотите установить для этой кнопки 100% ширину и высоту. Это может не сработать, если это встроенный элемент, поэтому вам нужно установить для его свойства display значение block. Замените селектор .submit_input следующим: 

.submit_input {
    color:#FFF;
    margin:0 auto;
    text-align:center;
    font-size:14px;
    font-weight:bold;
    background:none;
    border:none;
    width: 100%;
    height: 100%;
    display: block;
    padding-top:6px;
    cursor:pointer;
}

Это должно сделать это. Приветствия.

1 голос
/ 28 июня 2010

Установите атрибуты width и height в классе submit_input css равными 100%

...