html - 不添加额外元素的右对齐

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>元素以便将其内容对齐到右侧。

Example Here .

根据您的评论:

I just want to put Contact me via <a href="mailto:js@example.com">email</a> on the right, not the whole address content.

您可以先将行内元素对齐到右侧(上述方法)，然后再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适用于此特定实例。