Сцентрированный элемент со ссылкой можно щелкнуть по обе стороны

Question

У меня есть элемент <button>, который был центрирован в середине страницы с привязанной вокруг него якорной биркой, как показано в this JSFiddle.

Из JSFiddle, если вы наведите указатель мыши по обе стороны от кнопки, активна ссылка. Я мог бы предотвратить это, обернув его вокруг <div>, а затем применить это к <div>:

div { 
    display: block; 
    margin: 0 auto; 
} 

Однако есть лучшее решение этой проблемы, как и в моем случае, у меня есть много кнопок, как это, и это займет много времени, чтобы подать заявление? Благодарю.

Answer 1

Лучшее решение это было просто обернуть кнопку с формой, как так:

<form action="link-to-page-here"> 
    <button>Button</button> 
</form> 

Используя это, я все еще могу центрирования кнопку с помощью:

button { 
    display: block; 
    margin: 0 auto; 
} 

Но избежать ссылку щелкнув по строке кнопки.

Answer 2

Вы не должны ставить <button> внутри из <a> тега

просто использовать <button></button> и использовать тот же стиль, который вы написали для кнопки тега, так что это должно быть что-то вроде этого:

button { 
    display: block; 
    margin: 0 auto; 
} 

Если вы должны использовать неправильную разметку и держать кнопку внутри <a> тега просто обернуть тег внутри тега сНа и изменить стили к следующим

<div> 
<a href=""> 
    <button>A Button</button> 
</a> 
</div> 

и стилей:

a{ 
    display: inline-block; 
    margin: 0 auto; 
} 
div{ 
    text-align: center; 
} 
button{ 
} 

Answer 3

Вы имеете в вид пространства внутри кнопки, кроме «кнопки» текста, потому что я не вижу какую-либо интерактивная области за пределами кнопки. Если это так, я думаю, что это всего лишь функция тега button. Когда я наводил курсор на кнопку, он выделяется синим цветом, но мой курсор не изменяется, как если бы я наводил ссылку на ссылку.

Если вы нажмете тег a href внутри кнопки, вы увидите, что курсор изменится при наведении курсора на текст кнопки. Тем не менее, кнопка будет по-прежнему выделять кнопку, когда курсор находится над пустым пространством внутри кнопки.

Кроме того, для чего вы используете ссылки? Вместо гиперссылки кнопки вы можете использовать атрибут URL в теге button, если вы пытаетесь использовать кнопку для отправки информации где-нибудь.