a中不同高度的元素-有解無憂

我有一個導航欄，其中包含“nav-left”和“nav-right”的兩個 div。我想左右浮動它們加上粘性位置。

導航欄中的元素高度不同。左側元素向上，右側元素向下。我需要它們垂直居中。

 nav {
  position: sticky;
  width: 100%;
  background: green;
  margin: 0;
  padding: 0;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;

}

nav a {
  display: inline-block;
  width: 60px;
  text-decoration: none;
}

.nav-left li {
  float: left;
}

.nav-right li {
  float: right;
}

<header class="header">
<nav class="nav">
  <div class="nav-left">
    <ul>
      <li><a href="#">Blah</a></li>
      <li><a href="#">Blah</a></li>
      <li><a href="#">Blah</a></li>
    </ul>
  </div>
  <div class="nav-right">
    <ul>
      <li><a href="#">Bloh</a></li>
      <li><a href="#">Bloh</a></li>
    </ul>
  </div>
</nav>

uj5u.com熱心網友回復：

與其在這里使用浮點數，不如添加display: flex;并左右justify-content: space-between;分配這兩個ul。在這種情況下，您還需要添加nav ul li { display: inline-block; }以水平顯示這些串列。

padding（如果您希望它更高，請使用導航欄上的頂部和底部）

nav {
  position: sticky;
  width: 100%;
  background: green;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

nav ul li {
  display: inline-block;
}

nav a {
  display: inline-block;
  width: 60px;
  text-decoration: none;
}

<header class="header">
  <nav class="nav">
    <div class="nav-left">
      <ul>
        <li><a href="#">Blah</a></li>
        <li><a href="#">Blah</a></li>
        <li><a href="#">Blah</a></li>
      </ul>
    </div>
    <div class="nav-right">
      <ul>
        <li><a href="#">Bloh</a></li>
        <li><a href="#">Bloh</a></li>
      </ul>
    </div>
  </nav>

uj5u.com熱心網友回復：

問題是<ul>和<div>元素是塊級元素。

更好的方法是使用 flexblox。

與其他答案類似，但沒有<ul>and<li>元素（將是 flexbox 中的 flexbox）。我也在使用display: flex;with justify-content: space-between;。

我添加align-self: flex-end;了右對齊專案并使用邊距來保持導航專案之間的距離。

為了清楚起見，去掉了所有不相關的部分。

我最喜歡不時檢查 flexbox 的網站： https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

nav {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  list-style-type: none;
}

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

.nav-right {
  align-self: flex-end;
}

<header class="header">
<nav class="nav">
  <div>
    <a href="#">Blah</a>
    <a href="#">Blah</a>
    <a href="#">Blah</a>
  </div>
  <div class="nav-right">
    <a href="#">Bloh</a>
    <a href="#">Bloh</a>
  </div>
</nav>

uj5u.com熱心網友回復：

最好使用flexbox

nav {
    display: flex;
    justify-content: space-between;
    position: sticky;
    width: 100%;
    height: 3rem;
    background: green;
    margin: 0;
    padding: 0;

  }
  nav ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 1rem;
    overflow: hidden;
    position: relative;
  }
  
  nav a {
    width: 60px;
    align-items: center;
    text-decoration: none;
    padding: 1rem;
  }

<!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="style.css">
    <title>Document</title>
</head>
<body>
    <header class="header">
        <nav class="nav">
          <div class="nav-left">
            <ul>
              <li><a href="#">Blah</a></li>
              <li><a href="#">Blah</a></li>
              <li><a href="#">Blah</a></li>
            </ul>
          </div>
          <div class="nav-right">
            <ul>
              <li><a href="#">Bloh</a></li>
              <li><a href="#">Bloh</a></li>
            </ul>
          </div>
        </nav>
</body>
</html>

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

標籤：htmlcss导航栏

上一篇：你能在htmlstyle=""中使用css術語“@media”嗎

下一篇：自定義無線電選擇器不起作用