html - 如何使列表和段落内联和 float 正确？

Question

我无法将我的列表与其右侧的

Sign In

内联。我尝试为标签放置 float ，因为标题上的每个部分都是一个链接，但这是行不通的。任何人都可以帮助我将 Logo 向左浮动，列表向右浮动，登录是最右边的东西(向右浮动几乎是为了登录)。感谢我得到的任何答案，我真的很感激。

html:

<header>
  <nav id="header-flex">

    <div>
      <img src="logo.jpg" alt=logo width="30px" height="30px">
    </div>

    <div>
      <ul>
        <li><a href="___">Shop</a></li>
        <li><a href="___">Products</a></li>
        <li><a href="___">FAQ</a></li>
        <li><a href="___">Blog</a></li>
      </ul>
    </div>

    <div>
      <p><a href="___">Sign In</a></p>
    </div>

  </nav>
</header>

CSS:

#header-flex {
  display: flex;
  position: fixed;
  background: rgb(0,191,255);
  height: 75px;
  width: 100%;

}

header a {
  display: inline-block;
  float: right;
}

Answer 1

这可以通过给你的 div 一个宽度并为它们分配 'float: left' 来完成，就像这样:

HTML:

    <div class="left">
        <img src="logo.jpg" alt="logo" width="30px" height="30px">
    </div>

    <div class="mid">
        <ul>
            <li><a href="___">Shop</a></li>
            <li><a href="___">Products</a></li>
            <li><a href="___">FAQ</a></li>
            <li><a href="___">Blog</a></li>
        </ul>
    </div>

    <div class="right">
        <p><a href="___">Sign In</a></p>
    </div>

</nav>
</header>

CSS:

#header-flex {
    display: flex;
    position: fixed;
    background: rgb(0, 191, 255);
    height: 75px;
    width: 100%;
}

header a {
    display: inline-block;
    float: right;
}

.left, .mid, .right {
    float: left;
    width: 33%;
}