Question

左边的Hello底部是不是正确放置，为什么？

＆＃13;

<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>

＆＃13;

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>

如何正确对齐这些链接？

2 个答案: