css - 如何在 HTML 5 的 <nav> 元素中居中等间距的 anchor 标记

Question

我有几个基本的 CSS 和 HTML5 相关问题。

请见谅

我有一个 <nav>元素。

<nav>
    <a href="/html/">HTML</a>
    <a href="/css/">CSS</a>
    <a href="/js/">JavaScript</a>
    <a href="/jquery/">jQuery</a>
</nav>

我想制作 <a>中的标签水平居中对齐。

但是<nav>是一个 block 级元素。

1> 那么样式是如何工作的呢？它不应该在 block 级元素上工作，对吧？

    nav {
        text-align: center;
        border: 1px solid #ABABAB;
    }

另外，我想要 anchor tags to be equally spaced and at the same time text within them to be horizontally center aligned ？

我试过了

    nav a {
        display: inline-block;
        width:25%;
        border: 1px solid red;
    }

但是没有用？

2>怎么做？

请提供新手容易理解的解释。

Answer 1

您可以使用 css3 flexbox .遵循 CSS 将创建您需要的结果。

nav {
  display: flex;
}
nav a {
  flex-grow: 1;
}

nav {
  text-align: center;
  border: 1px solid #ABABAB;
  margin-bottom: 10px;
  display: flex;
}
nav a {
  flex-grow: 1;
  border: 1px solid red;
}

<nav>
  <a href="/html/">HTML</a>
  <a href="/css/">CSS</a>
  <a href="/js/">JavaScript</a>
  <a href="/jquery/">jQuery</a>
</nav>
<nav>
  <a href="/html/">HTML</a>
  <a href="/css/">CSS</a>
  <a href="/js/">JavaScript</a>
  <a href="/jquery/">jQuery</a>
  <a href="/jquery/">AngularJS</a>
</nav>