Подогнать элемент «a» под размер кнопки

Question

Ну, у меня есть две кнопки (на испанском языке), и эти кнопки находятся внутри «а» (тег ссылки), так что:

<div class="MB789">
    <a href="#"><button class="B121">Ya soy miembro</button></a>
    <a href="#"><button class="B122">Quiero unirme</button></a>
</div>

Цель «а», очевидно, состоит в том, чтобы перенаправитьпользователя на соответствующей странице и кнопки для стиля (да, я хочу, чтобы пользователь видел кнопки, а не ссылки)

В CSS я написал следующее:

.MB789{
    display: table;
    padding: 10px;
    text-align: center;
}

.MB789 button{
    border: none;
    border: 1px solid black;
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
}

.MB789 a{
    margin: 10px;
    background: red; /*Debug: to visualize the elements 'a'*/
}

Эторезультат:

И вот в чем проблема, что элементы 'a' выделяются из кнопок.

И этоэто то, что происходит, когда я говорю элементам показывать себя в виде таблицы.

.MB789 a{
    display: table;
    background: red; /*Debug: to visualize the elements 'a'*/
}

Затем происходит следующее:

Я хочу, чтобы элементы «а» не выступали из кнопок, а чтобы пользователь нажимал кнопку, перенаправлялся на соответствующую ссылку.

Примечание: Я знаючто Javascript может быть перенаправлен, но я воздерживаюсь от этого, используя этот язык, потому что пользователь может отключить Javascript из настроек браузераNGS.

Answer 1

Во-первых, вы не можете вкладывать <button></button> элементы в тег <a>, который является недопустимой разметкой.Пожалуйста, посмотрите, почему здесь: Могу ли я вложить элемент в с использованием HTML5?

Во-вторых, вы можете присвоить тегу <a> стиль кнопки, и это разрешит вашпроблема.

Ваша HTML-разметка должна выглядеть следующим образом:

<div class="MB789">
  <a href="#">Ya soy miembro</a>
  <a href="#">Quiero unirme</a>
</div>

Ваш CSS будет выглядеть так:

.MB789{
  display: inline-block;
  padding: 10px;
  text-align: center;
}

.MB789 a{
  display: inline-block;
  border: 1px solid black;
  padding: 10px 20px;
  margin: 10px;
  cursor: pointer;
}

Answer 2

Вы поместили поле 10px на кнопки, потому что они находятся внутри тегов a, это поле будет находиться между кнопками и краем тегов a, делая их выступающими из кнопка. Попробуйте удалить это поле:

.MB789 button{
    border: none;
    border: 1px solid black;
    padding: 10px 20px;
    cursor: pointer;
}