Как правильно выровнять эти ссылки?

Question

Неправильно размещен нижний угол слева, почему?

<div style="float: left; width: 45%;text-align:right">
  <a href="lol.html" class="button primary fit" style="width:50%">Hello</a>
  <br/>
  <br/>
  <a href="lol.html" class="button fit" style="width:50%">Hello</a>
</div>
<div style="float: right; width: 45%;text-align:left">
  <a href="lol.html" class="button primary fit" style="width:50%">Hello</a>
  <br/>
  <br/>
  <a href="lol.html" class="button fit" style="width:50%">Hello</a>
</div>

Answer 1

В левом столбце после тега a и перед тегом <br/> был пробел.Размещение br сразу после удаления a этого пробела.Так что это был верхний левый, а не нижний левый, который не был выровнен.

Это повлияло только на левый столбец, потому что он имел text-align:right.

<div style="float: left; width: 45%;text-align:right">
  <a href="lol.html" class="button primary fit" style="width:50%">Hello</a><br/>
  <br/>
  <a href="lol.html" class="button fit" style="width:50%">Hello</a>
</div>
<div style="float: right; width: 45%;text-align:left">
  <a href="lol.html" class="button primary fit" style="width:50%">Hello</a>
  <br/>
  <br/>
  <a href="lol.html" class="button fit" style="width:50%">Hello</a>
</div>

Answer 2

Тег a автоматически добавляет определенное поле после ссылки автоматически, вот что здесь происходит.Ваш первый тег привязки добавляет немного места, который перемещает следующий тег привязки не на своем месте.Я добавил цвет фона для ясности, плюс отрицательный атрибут поля к первому тегу.Надеюсь, это поможет.

<div style="float: left; width: 45%;text-align:right;background-color:bisque;">
  <a href="lol.html" class="button primary fit" style="width:50%;margin-right:-4px;">Hello</a>
  <br />
  <br />
  <a href="lol.html" class="button fit" style="width:50%;">Hello</a>
</div>
<div style="float: right; width: 45%;text-align:left;background-color:burlywood;">
  <a href="lol.html" class="button primary fit" style="width:50%">Hello</a>
  <br />
  <br />
  <a href="lol.html" class="button fit" style="width:50%">Hello</a>
</div>