Question

我正在尝试使用锚元素来显示块。当我这样做时，所有锚元素都从上到下列出，而不是全部在同一行。我知道我可以通过向左/向右浮动来解决这个问题，但我希望将它全部对齐在中心。这是我的HTML

<nav id="navigation">
    <a id="navigation-anchor-normal" href="contact.html">Contact</a>
    <a id="navigation-anchor-normal" href="plugins.html">Plugins</a>
    <a id="navigation-anchor-current" href="home.html">Home</a>
    <a id="navigation-anchor-normal" href="games.html">Games</a>
    <a id="navigation-anchor-normal" href="donate.html">Donate</a>
</nav>

这是我的CSS

#navigation {
    text-align:center;
}
#navigation-anchor-normal {
    text-decoration:none;
    color:aqua;
    display:block;
    padding:10px 15px;
}
#navigation-anchor-current {
    text-decoration:none;
    color:aqua;
    display:block;
    padding:10px 15px;
}

无论如何我可以将这些锚元素放在同一条线上吗？

Answer 1

将浮动：左侧放在＃navigation-anchor-current＆amp; #navigation-anchor-normal然后编辑容器框样式以使所有文本居中

小提琴链接：http://jsfiddle.net/uhyu3dsy/

#navigation {
text-align:center;
}
#navigation-anchor-normal {
    text-decoration:none;
    color:aqua;
    display:block;
    padding:10px 15px;
    float:left;
}
#navigation-anchor-current {
    text-decoration:none;
    color:aqua;
    display:block;
    padding:10px 15px;
    float:left;
}

Answer 2

让我知道这是你的要求

＆＃13;

#navigation {
    text-align:center;
    display:inline;  <!-- changes here -->
}
#navigation-anchor-normal {
    text-decoration:none;
    color:aqua;
    display:block;
    padding:10px 15px;
  display:inline;   <!-- changes here -->
}
#navigation-anchor-current {
    text-decoration:none;
    color:aqua;
    display:block;
    padding:10px 15px;
   display:inline;   <!-- changes here -->
}

＆＃13;

<nav id="navigation">
    <a id="navigation-anchor-normal" href="contact.html">Contact</a>
    <a id="navigation-anchor-normal" href="plugins.html">Plugins</a>
    <a id="navigation-anchor-current" href="home.html">Home</a>
    <a id="navigation-anchor-normal" href="games.html">Games</a>
    <a id="navigation-anchor-normal" href="donate.html">Donate</a>
</nav>

＆＃13;

Answer 3

从语义上讲，导航元素应该是导航元素项的列表。此外，除非绝对必要，否则偏离使用CSS id（＃）通常是“好”的做法。

#navigation ul {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

#navigation li {
  float: left;
  list-style: none;
}

#navigation a {
  text-align: center;
  text-decoration: none;
  color: aqua; /* ewww aqua */
  display: block;
  padding: 10px 15px;
}

/* the active nav element can be changed to signify that it is actually active */
#navigation .active {
  color: grey;
}

<!-- HTML white space can sometimes get rendered and cause unwanted results.
Using comments can help prevent this. -->

<nav id="navigation">
  <ul>
    <li><a href="contact.html">Contacts</a></li><!-- 
    --><li><a href="plugins.html">Plugin</a></li><!--
    --><li><a class="active" href="index.html">Home</a></li><!--
    --><li><a href="games.html">Games</a></li><!--
    --><li><a href="donate.html">Donate</a></li>
  </ul>
</nav>

Html如何将锚显示为块并使其居中于同一行

3 个答案: