如何在HTML 5的<nav>元素中居中等间隔的锚标签

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>是一个块级元素。

1＆GT;那么风格如何运作？它不适用于块级元素吗？

    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>

Answer 2

您可以将链接浮动到左侧并清除:after :before

* {
  box-sizing: border-box;
}
nav {
  text-align: center;
  border: 1px solid #ABABAB;
}
nav a {
  display: inline-block;
  float: left;
  width: 25%;
  border: 1px solid red;
}
nav:after,
nav:before {
  display: table;
  clear: both;
  content: ' ';
}

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