Question

我有这样的页脚：

<style>
address {background:tan;}
</style>
<footer><address><a href="contact-form-url">Contact form</a>Contact me via <a href="mailto:js@example.com">email</a></address></footer>

如何在不添加额外元素的情况下将Contact me via <a href="mailto:js@example.com">email</a>放在footer/address的右侧？

Answer 1

我不确定你究竟在寻找什么。但是，由于您似乎不希望将整个<address>向右移动（可以通过float: right完成），因此您可以向text-align: right;添加<address>声明{1}}元素，以便将其内容与右侧对齐。

<强> Example Here

根据你的评论：

我只想通过右侧的<a href="mailto:js@example.com">email</a>与我联系，而不是整个地址内容。

您可以先将内联元素与右侧对齐（上述方法），然后float * 第一个* <a>元素（这是第一个孩子）它在这个特定实例中的父级）在左侧如下：

address { text-align: right; } /* move the inline elements to the right side */
address:after {                /* clearfix hack */
  content: "";
  display: table;
  clear: both;
}

address > a:first-child {      /* float the first anchor tag to the left */
  float: left;
}

<强> Updated Example

根据您的标记，您可能需要使用:first-of-type而不是:first-child。但:first-child适用于此特定实例。

右对齐而不添加额外元素

1 个答案: