Проблема в нажатии кнопки повсюду. Кнопка CSS - PullRequest
Новая
       2

Проблема в нажатии кнопки повсюду. Кнопка CSS

0 голосов
/ 30 июня 2010

Probem
У меня есть кнопка CSS, которая может нажимать только на тестовую область. Я не могу нажать на нетекстовую область кнопки.

Вот HTML-код кнопки «РЕДАКТИРОВАТЬ» на моем веб-сайте. 

<div class="stndrd_btn">
    <p><?php echo $html->link('Edit','... destination....'); ?></p>
</div>

Ниже приведен код CSS для кнопки. 

.stndrd_btn {
    width:140px;
    height:30px;
    background:url(img/stndrd_btn.png);
    color:#FFF;
    cursor: pointer;

}

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

Пожалуйста, дайте мне знать, как сделать так, чтобы щелчок работал по всей кнопке. СПАСИБО !!

Ответы [ 5 ]

6 голосов
/ 30 июня 2010

Сделайте тег <a> display: block и задайте ему ширину и высоту, чтобы кнопка полностью состояла из элемента <a>. 

<a href="http://www.google.com" style="display: block; width: 300px; height: 200px; background: gold;">Go to Google</a>

В качестве альтернативы, вы можете задать ей границучтобы текст был посередине кнопки: 

<a href="http://www.google.com" style="display: block; width: 300px; border: solid gold 100px; background: gold;">Go to Google</a>
0 голосов
/ 01 июля 2010

Попробуйте использовать только тег "href", а затем добавьте к нему отступы и фон. обивка: 5px 5px; фон: серый; Это будет выглядеть как кнопка и будет кликабельным.

0 голосов
/ 30 июня 2010

сделать как дисплей: блок и дать ему заполнение как-то вроде

отступ: 5px 5px 5px 5px;

это увеличит область щелчка ссылки

0 голосов
/ 30 июня 2010

Вам действительно не нужен тег p. Примените все к div, и я думаю, что вы должны быть в порядке. Я бы на самом деле применил щелчок к href, хотя тогда вы также можете иметь запасной вариант, если он необходим людям без JS или поисковых систем. 

<div class="stndrd_btn">
    <a href="#"><?php echo $html->link('Edit','... destination....'); ?></a>
</div>

В этом случае примените свойства кнопки к тегу.

0 голосов
/ 30 июня 2010

Мне кажется, проблема в том, что тег p находится внутри div, но вы применяете фоновое изображение к div, но к ссылке в p.p также имеет отступы.

Итак, в двух словах попробуйте сделать все это в одном теге.

РЕДАКТИРОВАТЬ: как @Sjoerd говорит: используйте тег a.

...