如何将文本移动到页面的右侧

Question

我正在尝试将导航栏内容移动到页面的右侧，但它没有与导航栏标题对齐。

* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica;
}
header li {
    list-style: none;
    float: right;
    display: inline;
    padding: 20px;
   padding-left:3px;
}
header {
  justify-content: space-between;
  align-items: center;
   box-shadow: 0 1px 8px #ddd;
  
}

<header>
<h1> Dev101 </h1>
  <nav>
 <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact</a></li>
 </ul>
  </nav>
 </header>

Answer 1

您可以向 header 添加 flex:

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 8px #ddd;
}

Answer 2

删除 float。 float 已弃用。为了使 justify-content: space-between; 起作用，您需要在同一元素上使用 display: flex;。

* {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica;
}

header li {
  list-style: none;
  display: inline;
  padding: 20px;
  padding-left: 3px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 8px #ddd;
}

<header>
  <h1> Dev101 </h1>
  <nav>
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

Answer 3

不使用任何 padding ，基本上 making 它 responsive ，尝试避免在您的网站中使用px，因为它不利于响应。

而是使用 % , rem , em.

* {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica;
}

header li {
  list-style: none;
  display: inline;
}
header li a{
  text-decoration: none;
}
header li a:hover{
  text-decoration: underline;
}
 

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 8px #ddd;
}
header nav{
  width:40%;
}
header nav ul{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

<header>
  <h1> Dev101 </h1>
  <nav>
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

Answer 4

只需使用 float 将导航向右对齐

HTML:

<header>
  <h1>Dev420</h1>
 <nav>
   <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Services</a></li>
       <li><a href="#">Contact</a></li>
   </ul>
 </nav>
</header>

CSS:

nav{
   float: right;
}

如何将文本移动到页面的右侧

how to move a text to the right side of the page

html

css

flexbox