如何让我的导航栏右对齐？

问题描述 投票：0回答：2

我对 html 和 CSS 还很陌生。这是我为前端 Web 开发课程制作的主页代码。我一直在摆弄 CSS 和 HTML 以使我的导航栏右对齐，但它在我的标题上方居中。有什么想法吗？我正在努力寻找解决此问题的方法。在此先感谢您的帮助！

body {
  background-color: #b8d8b8;
  font-family: Arial, sans-serif;
  text-align: center;
}

.header {
  background-color: #4d7d4d;
  color: white;
  padding: 10px;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
}

h1 {
  text-align: center;
  color: #4d7d4d;
  font-weight: bold;
}

.content {
  background-color: white;
  color: black;
  display: inline-block;
  padding: 20px;
  margin: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.content h2 {
  color: #4d7d4d;
  text-align: center;
}

.navbar {
  display: inline-block;
  background-color: #b8d8b8;
  text-align: right;
  padding: 10px;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border: 2px solid green;
  color: green;
}

.navbar a {
  color: green;
  text-decoration: none;
  margin-right: 10px;
}

footer {
  background-color: #4d7d4d;
  color: white;
  text-align: center;
  padding: 10px;
  position: absolute;
  bottom: 0;
  width: 100%;
}
<!DOCTYPE html>
<html>

<head>
  <title>Hauora Organic Fresh Pressed Juices</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <header>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#drinks">Drinks</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About Us</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Hauora Organic Fresh Pressed Juices</h1>
    <div class="content">
      <h2>Quality Organic Ingredients</h2>
      <p>At Hauora, we use only fresh, high-quality organic ingredients in our juices. We source our fruits and vegetables from local farms, ensuring their freshness and quality.</p>
      <p>Our commitment to organic ingredients supports local farmers and the environment.</p>
      <img src="quality_ingredients.jpg" alt="Quality Organic Ingredients">
    </div>
    <div class="content">
      <h2>Process and Freshness</h2>
      <p>At Hauora, we believe in freshness and use a state-of-the-art juicing process. Our juices are made to order, ensuring maximum freshness and flavor.</p>
      <p>We never use preservatives or pasteurization, so you can trust that our juices are pure and natural.</p>
      <img src="freshness_process.jpg" alt="Process and Freshness of our Juices">
    </div>
    <div class="content">
      <h2>Goals</h2>
      <p>At Hauora, our goal is to make healthy, organic juices accessible and affordable to everyone.</p>
      <p>We offer convenient online ordering and delivery options, and a variety of affordable juice options.</p>
      <img src="juice_goals.jpg" alt="Goals to Create a Healthy Juice Business">
    </div>
  </main>
</body>

</html>

html css navbar navigationbar web-frontend
2个回答
1
投票

要实现你想要的修改你的代码是这样的：

body {
  background-color: #b8d8b8;
  font-family: Arial, sans-serif;
  text-align: center;
}

.header {
  background-color: #4d7d4d;
  color: white;
  padding: 10px;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
}

h1 {
  text-align: center;
  color: #4d7d4d;
  font-weight: bold;
}

.content {
  background-color: white;
  color: black;
  display: inline-block;
  padding: 20px;
  margin: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.content h2 {
  color: #4d7d4d;
  text-align: center;
}

header {
  padding: 0 20px;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
}

nav a {
  color: green;
  text-decoration: none;
  margin-right: 10px;
}

footer {
  background-color: #4d7d4d;
  color: white;
  text-align: center;
  padding: 10px;
  position: absolute;
  bottom: 0;
  width: 100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./index.css" />
  <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css" />
  <title>Document</title>
</head>

<body>
  <header>
    <nav>
      <h1>Logo</h1>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#drinks">Drinks</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About Us</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Hauora Organic Fresh Pressed Juices</h1>
    <div class="content">
      <h2>Quality Organic Ingredients</h2>
      <p>
        At Hauora, we use only fresh, high-quality organic ingredients in our juices. We source our fruits and vegetables from local farms, ensuring their freshness and quality.
      </p>
      <p>
        Our commitment to organic ingredients supports local farmers and the environment.
      </p>
      <img src="quality_ingredients.jpg" alt="Quality Organic Ingredients" />
    </div>
    <div class="content">
      <h2>Process and Freshness</h2>
      <p>
        At Hauora, we believe in freshness and use a state-of-the-art juicing process. Our juices are made to order, ensuring maximum freshness and flavor.
      </p>
      <p>
        We never use preservatives or pasteurization, so you can trust that our juices are pure and natural.
      </p>
      <img src="freshness_process.jpg" alt="Process and Freshness of our Juices" />
    </div>
    <div class="content">
      <h2>Goals</h2>
      <p>
        At Hauora, our goal is to make healthy, organic juices accessible and affordable to everyone.
      </p>
      <p>
        We offer convenient online ordering and delivery options, and a variety of affordable juice options.
      </p>
      <img src="juice_goals.jpg" alt="Goals to Create a Healthy Juice Business" />
    </div>
  </main>

  <script></script>
</body>

</html>

在这里，我对 

nav
使用 flex，这样您就可以在 
ul
中将元素彼此并排放置 


您需要将 

    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        
 类分配给 HTML 中的 
.navbar
 元素并删除默认列表样式类型以获得所需的结果


nav


为
<nav class="navbar">

添加新的样式规则

list-style

    





    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.