Question

我试图格式化我的应用程序的页脚，并且我想在页脚上有三个我想要的东西，我想在同一行上的所有超链接。

        <p><a href="mailto:me@myemail.com">&copy; 2017 - My Name, Section 4</a>
        <a asp-area="" asp-controller="Home" asp-action="About">About</a>
        <a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></p>

我希望“关于”和“联系”超链接在页脚右侧对齐，就像这样。

但是我写的代码产生了这个：

我尝试了浮动和文本对齐，但我可能做错了。

Answer 1

只需添加一个类并使用一些填充浮动它：

https://jsfiddle.net/cx5m40wu/

<p><a href="mailto:me@myemail.com">&copy; 2017 - My Name, Section 4</a>
                <a asp-area="" asp-controller="Home" asp-action="Contact" class="alignRight">Contact</a>
                <a asp-area="" asp-controller="Home" asp-action="About" class="alignRight">About</a></p>

.alignRight{
  float: right;
  padding-left: 15px;
}

Answer 2

我会为标记推荐一种不同的方法。

在<footer>标记内使用<li>（无序列表）。然后，为每个<a>锚标记使用/* Unordered list */ .footer { padding: 0; margin: 0; list-style-type: none; display: flex; } /* List item */ .footer__item { padding: 0 .5em; } /* Select the second item from last to first in case you add more items */ .footer__item:nth-last-child(2) { margin-left: auto; }（列表项）。这对于语义和可访问性来说会更好。

拥有正确的HTML标记后，您可以使用您喜欢的任何方法继续设置样式：

Flexbox（推荐）：

＆＃13;

<footer>
  <ul class="footer">
    <li class="footer__item">
      <a href="mailto:me@myemail.com">&copy; 2017 - My Name, Section 4</a>
    </li>
    <li class="footer__item">
      <a asp-area="" asp-controller="Home" asp-action="About">About</a>
    </li>
    <li class="footer__item">
      <a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a>
    </li>
  </ul>
</footer>

＆＃13;

/* Unordered list */

.footer {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: grid;
  grid-gap: 0 .5em;
  grid-template-columns: repeat(3, auto);
}


/* Select the second item from last to first */

.footer__item:nth-last-child(2) {
  margin-left: auto;
}

＆＃13;

CSS网格：

＆＃13;

<footer>
  <ul class="footer">
    <li class="footer__item">
      <a href="mailto:me@myemail.com">&copy; 2017 - My Name, Section 4</a>
    </li>
    <li class="footer__item">
      <a asp-area="" asp-controller="Home" asp-action="About">About</a>
    </li>
    <li class="footer__item">
      <a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a>
    </li>
  </ul>
</footer>

＆＃13;

/* Unordered lists */

.footer,
.footer__section {
  padding: 0;
  margin: 0;
  list-style-type: none;
}


/* List item */

.footer__item {
  float: left;
  padding: 0 .5em;
}


/* Nested unordered list */

.footer__section {
  float: right;
}

＆＃13;

<强>花车：

＆＃13;

<footer>
  <ul class="footer">
    <li class="footer__item">
      <a href="mailto:me@myemail.com">&copy; 2017 - My Name, Section 4</a>
    </li>
    <!-- Requires extra markup -->
    <ul class="footer__section">
      <li class="footer__item">
        <a asp-area="" asp-controller="Home" asp-action="About">About</a>
      </li>
      <li class="footer__item">
        <a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a>
      </li>
    </ul>
  </ul>
</footer>

＆＃13;

git reset --hard

git rebase -i

＆＃13;

Answer 3

Flexbox可以做到这一点：

p {
  display: flex;
}

p a:first-of-type {
  margin-right: auto;
}

<p><a href="mailto:me@myemail.com">&copy; 2017 - My Name, Section 4</a>
  <a asp-area="" asp-controller="Home" asp-action="About">About</a>
  <a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></p>

如何在<p>标签中获取两个元素以在右侧对齐？

3 个答案: