努力將徽標定位在左側，導航定位在右側-有解無憂

對此非常陌生，不能將導航欄置于右側并與我的標題內左側的徽標對齊。我試過浮動：對；并對齊父容器上的專案。當我嘗試建立網站并認為是時候伸出援手時，我一直被困在這個問題上。任何幫助將非常感激。干杯。

body {
    background-color: lightgrey; }


header {
    border-bottom: 1px solid black;
    display: flex; }

.container {
    display: flex; 
    background-color: white; }


.container li {
    display: inline-block;
    list-style-type: none;
    color: black;
    padding: 0 20px; }


.company-logo img {
    width: 150px; }


.hero-image {
    height: 500px;
    background-image: url("./images/designbig.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    margin-top: 50px; }

.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    color: red;

}

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

<body>

  <header>
    <div class="container">
      <div class="company-logo">
          <img src="./images/92ad01dfa3f6d8f97a62cfdc21c9c566.jpeg" alt="">
      </div>
      <nav>
        <ul class="nav-links">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <div class="hero-image">
    <div class="hero-text">
      <h1>Hello World</h1>
      <p>This is me</p>
      <button>Hire Me</button>
    </div>
  </div>

  <div class="content">
    <p>Hello, this is some paragraph content. Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum quo quas saepe, dolorem tempora molestiae nostrum dolore neque, vero adipisci sunt id praesentium cumque aspernatur quae nemo? Pariatur, rerum? Perspiciatis.</p>
  </div>

</body>

</html>

uj5u.com熱心網友回復：

您需要洗掉display:flex并header添加這些行.container：

align-items: center;
justify-content: space-between;

完整代碼：

body {
  background-color: lightgrey;
}
.container {
  display: flex;
  background-color: white;
  align-items: center;
  justify-content: space-between;
}

.container li {
  display: inline-block;
  list-style-type: none;
  color: black;
  padding: 0 20px;
}

.company-logo img {
  display:block;
  width: 150px;
}

.hero-image {
  height: 500px;
  background-image: url("./images/designbig.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-top: 50px;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  color: red;
}

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

<body>

  <header>
    <div class="container">
      <div class="company-logo">
        <img src="https://images.unsplash.com/photo-1599305445671-ac291c95aaa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80" alt="">
      </div>
      <nav>
        <ul class="nav-links">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <div class="hero-image">
    <div class="hero-text">
      <h1>Hello World</h1>
      <p>This is me</p>
      <button>Hire Me</button>
    </div>
  </div>

  <div class="content">
    <p>Hello, this is some paragraph content. Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum quo quas saepe, dolorem tempora molestiae nostrum dolore neque, vero adipisci sunt id praesentium cumque aspernatur quae nemo? Pariatur, rerum? Perspiciatis.</p>
  </div>

</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/436794.html

標籤：html css

上一篇：自動更改字體顏色紅色和綠色

下一篇：如何將條件面板與其他條件面板隔離開來？