css 创建标题在左、按钮在右的导航栏

oprakyz7 于 2023-05-08 发布在其他

关注(0)|答案(1)|浏览(153)

这是我的导航栏现在的样子：

这就是我想要的样子（标题在左边，按钮在右边）：

我把导航栏分成左对齐的标题列表和右对齐的按钮列表，但是由于某种原因，这两个列表堆叠在一起，而不是在一行上。如何创建上面的导航栏？

超文本标记语言

<div class = "navBarWrapper">
   <div class="top bar">
        <ul class = "left">
            <li class = "title">Photo Albums</li>
        </ul>
        <ul class = "right">
            <li class = "buttons"> <a class = "iconLink" href = ""><img class = "iconNotHover" src = "images/uploadImage.png" alt = "uploadImage" width = "40" align = "middle"/></a></li>
            <li class = "buttons"> <a href = "login.html" class="otherPages">Login</a></li>
        </ul>
    </div> 
</div>

CSS

.navBarWrapper {
  position: fixed;
    z-index: 1;
    width: 100%;

}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.bar {
  height: 8.02%;
}

.bar li {
    display: inline-block;
}

css

来源：https://stackoverflow.com/questions/42750938/create-nav-bar-with-title-on-left-and-buttons-on-right

1条答案

按热度按时间

r3i60tvu1#

您不希望使用text-align将块元素向左或向右移动。这只会将一个block元素中的inline元素向左或向右对齐，而block元素仍然在它自己的行上。
你可以将left/right元素浮动到左/右，但是我会在父元素上使用flexbox，justify-content: space-between来分隔左/右，align-items来垂直对齐它们。

.navBarWrapper {
  position: fixed;
  z-index: 1;
  width: 100%;
}

.bar {
  height: 8.02%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bar li {
  display: inline-block;
}

<div class="navBarWrapper">
  <div class="top bar">
    <ul class="left">
      <li class="title">Photo Albums</li>
    </ul>
    <ul class="right">
      <li class="buttons">
        <a class="iconLink" href=""><img class="iconNotHover" src="images/uploadImage.png" alt="uploadImage" width="40" align="middle" /></a>
      </li>
      <li class="buttons"> <a href="login.html" class="otherPages">Login</a></li>
    </ul>
  </div>
</div>

或者，如果您想让它们浮动，这里是overflow: auto在.bar上的布局，以清除浮动。

.navBarWrapper {
  position: fixed;
  z-index: 1;
  width: 100%;
}

.left {
  float: left;
}

.right {
  float: right;
}

.bar {
  height: 8.02%;
  overflow: auto;
}

.bar li {
  display: inline-block;
}

<div class="navBarWrapper">
  <div class="top bar">
    <ul class="left">
      <li class="title">Photo Albums</li>
    </ul>
    <ul class="right">
      <li class="buttons">
        <a class="iconLink" href=""><img class="iconNotHover" src="images/uploadImage.png" alt="uploadImage" width="40" align="middle" /></a>
      </li>
      <li class="buttons"> <a href="login.html" class="otherPages">Login</a></li>
    </ul>
  </div>
</div>

赞(0）回复(0）举报 2023-05-08

我来回答

css 创建标题在左、按钮在右的导航栏

1条答案

相关问题

热门标签

最新问答