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

I have a couple of basic CSS and HTML5 related questions.

我有一些基本的CSS和HTML5相关的问题。

Please bear the ignorance.

请承担无知。

I have a <nav> element.

我有一个

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

I want to make the <a> tags within the to be horizontally center aligned .

我想使其中的标签水平居中对齐。

But <nav> is a block level element .

但

1> So how does the style work ? It should not work on block level elements right ?

1>那么风格如何运作？它应该不适用于块级元素吗？

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

Also , I want the anchor tags to be equally spaced and at the same time text within them to be horizontally center aligned ?

另外，我希望锚标签的间距相等，同时它们内的文本是水平居中对齐的吗？

I tried

我试过了

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

But it did not work ?

但它不起作用？

2> How to do this ?

2>怎么做？

Please provide an explanation which is easy for a newbie to be understood.

请提供一个易于理解新手的解释。

2 个解决方案

#1

You can use css3 flexbox. Following css will create the result that you need.

你可以使用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>

#2

You can float the links to the left and clear the :after :before

您可以将链接浮动到左侧并清除：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>

#1