如何将部分导航内容向右对齐？答案

【问题标题】：How to align part of the navigation content to the right?如何将部分导航内容向右对齐？
【发布时间】：2021-10-09 08:50:51
【问题描述】：

我的导航栏代码如下：

index.html

<header id="header" class="flex">
  <h2 id="site-name"><a href="#">RandomSite</a></h2>

    <!-- NAVIGATION -->
    <nav id="header-nav">
      <h3 class="hidden">RandomSite's hidden navigation</h3>
      <ul class="nav-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

</header>

styles.css

/* NAVIGATION */
header {
    border: 2px dashed black;
    display: flex;
    padding: 10px;
}

header h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 16px 0px;
}

.nav-list {
    list-style-type: none;
    display: flex;
    float: right;
}

li {
    list-style: none;
    display: inline;
    padding: 0px 5px 0px 0px;
}

这就是我的导航栏的样子。我希望无序列表内容向右对齐。我怎么做？ Navigation bar screenshot

【问题讨论】：

将justify-content: space-between添加到header类中，将在title和nav组件之间放置空白并将nav推到右侧。

标签： html css navigation

【解决方案1】：

您需要将justify-content: space-between 添加到.header 类中。
此外，要删除<a> 标记的默认下划线，您必须使用text-decoration:none，并隐藏类.hidden 的元素使用display:none。

/* NAVIGATION */
header {
    border: 2px dashed black;
    display: flex;
    justify-content:space-between;
    padding: 10px;
}

header h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 16px 0px;
}

.nav-list {
    list-style-type: none;
    display: flex;
    float: right;
}
.hidden{
  display:none;
/*   visibility:hidden; */
}
li {
    list-style: none;
    display: inline;
    padding: 0px 5px 0px 0px;
}
#site-name a {
    text-decoration:none;
    color: black;
}
.nav-list a {
    text-decoration:none;
    color: black;
}
*{font-family:sans-serif}

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <header id="header" class="flex">
  <h2 id="site-name"><a href="#">RandomSite</a></h2>

    <!-- NAVIGATION -->
    <nav id="header-nav">
      <h3 class="hidden">RandomSite's hidden navigation</h3>
      <ul class="nav-list">
        <li><a href="#!">Home</a></li>
        <li><a href="#!">News</a></li>
        <li><a href="#!">Blog</a></li>
        <li><a href="#!">About</a></li>
        <li><a href="#!">Contact</a></li>
      </ul>
    </nav>
</header>
</body>
</html>

【讨论】：

【解决方案2】：

我删除了您之前拥有的所有不必要的代码。我为您的a 标签添加了一些填充，这样它看起来会更好。要使您的导航项向右移动，只需添加space-between 即可解决您的问题。

* {
  font-family: sans-serif;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px dashed black;
    padding: 10px;
}

header h2 {
    font-size: 18px;
    margin: 16px 0px;
}

header a {
  text-decoration: none;
}

li > a {
  color: #484b4f;
  padding: 0.5rem;
}

header > h2 > a {
  color: black;
}

.nav-list {
  list-style-type: none;
}

li {
  display: inline;
}

<header>
  <h2 className="header-site-name">
    <a href="#">RandomSite</a>
  </h2>
    <nav>
      <ul class="nav-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
</header>

【讨论】：