在导航栏上对齐左元素和右元素时遇到问题答案

【问题标题】：Having trouble aligning left elements and right elements on a navbar在导航栏上对齐左元素和右元素时遇到问题
【发布时间】：2020-10-01 19:17:55
【问题描述】：

我目前正在尝试制作导航栏，但无法对齐左右容器。目前，右侧部分在标题容器下。

header {
  width: 100%;
  background-color: #FFF6E3;
}

.left-nav-side {
  /* align-items: center;
        width: 30%;
        margin-left: 10%;
        margin-top: 6%; */
  align-items: center;
  width: 30%;
  padding: 2%;
  margin-left: 10%;
}

.right-nav-side {
  float: right;
  align-items: center;
  width: 40%;
  padding: 2%;
  margin-right: 10%;
}

<header>
  <div class='left-nav-side'>
    <img id='logo-image' src="images/cinnamon-roll.png" alt="">
    <h1 id="logo-title">BUN BUN BAKE SHOP</h1>
  </div>

  <div class='right-nav-side'>
    <ul>
      <li>About Us</li>
      <li><input type="button" id="button" value="Input Button"></li>
      <li><img id='logo-image' src="images/shopping-cart.png" alt=""></li>
      <li id='cart-number'>0</li>
    </ul>
  </div>
</header>

【问题讨论】：

请注意，您可以将 HTML/CSS/JS 嵌入直接放入您的帖子中。 Muakes 更容易查看/调试。只需使用“Javascript/HTML/Css sn-p”按钮

标签： html css alignment navbar

【解决方案1】：

简答：

header{
    width:100%;
    background-color:#FFF6E3;
    display: flex;
    justify-content: space-between;

}

长答案：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

header {
  min-height: 50px;
  width: 100%;
  background-color: #f3ddad;
  display: flex;
  justify-content: space-between;
}

.left-nav-side {
  align-items: center;
  margin-left: 5%;
  display: flex;
}

.right-nav-side {
  margin-right: 5%;
  display: flex;
}

.right-nav-side ul {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  list-style: none;
}

.right-nav-side ul li {
  margin-right: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <header>
    <div class="left-nav-side">
      <img id="logo-image" src="images/cinnamon-roll.png" alt="" />
      <h1 id="logo-title">BUN BUN BAKE SHOP</h1>
    </div>

    <div class="right-nav-side">
      <ul>
        <li>About Us</li>
        <li><input type="button" id="button" value="Input Button" /></li>
        <li><img id="logo-image" src="images/shopping-cart.png" alt="" /></li>
        <li id="cart-number">0</li>
      </ul>
    </div>
  </header>
</body>

</html>

【讨论】：

【解决方案2】：

你需要使用display: flex;来做你想做的事。

此示例将对您有所帮助。

#flex{
                display: flex;
                flex-wrap: nowrap;
            }
            
            #left{
                width: 50%;
            }
            
            #right{
                width: 50%;
            }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width = device-width, initial-scale = 1.0">
        <meta http-equiv="X-UA-Compatible" content = "ie=edge">
        <title> Keat </title>
    </head>
    
    <body>
        <div id="flex">
            <div id="left">
            <h2>This is for left side</h2>
            </div>
            <div id="right">
            <ul>
              <li>Link1</li>
              <li>Link2</li>
              <li>Link3</li>
            </ul>
            </div>
        </div>
    </body>
</html>

此代码将被左右分隔。如果你想让一些项目左右浮动，你可以使用 display:flex;方法。否则永远都是问题。

【讨论】：

【解决方案3】：

我已尝试编辑您的代码以实现左导航<div> 和右导航<div> 的左右对齐。请检查这是否符合您的要求。

header {
  width: 100%;
  background-color: #FFF6E3;
  /* adding this may work */
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* adding this may work */
}

.left-nav-side {
  width: 30%;
  padding: 2%;
  margin-left: 10%;
}

.right-nav-side {
  width: 40%;
  padding: 2%;
  margin-right: 10%;
  /* adding this may work */
  display: flex;
  justify-content: flex-end;
  /* adding this may work */
}

<header>
  <div class='left-nav-side'>
    <img id='logo-image' src="images/cinnamon-roll.png" alt="">
    <h1 id="logo-title">BUN BUN BAKE SHOP</h1>
  </div>

  <div class='right-nav-side'>
    <ul>
      <li>About Us</li>
      <li><input type="button" id="button" value="Input Button"></li>
      <li><img id='logo-image' src="images/shopping-cart.png" alt=""></li>
      <li id='cart-number'>0</li>
    </ul>
  </div>
</header>

【讨论】：