Question

我无法将我的列表内联以及右侧的

登录

。我尝试为标签添加浮动，因为标题上的每个部分都是一个链接，但这不起作用。任何人都可以帮我把徽标向左浮动，列表向右移动，登录是最右边的东西（浮动右边几乎是登录）。感谢我得到的任何答案，我真的很感激。

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%;
}

Answer 2

<div>默认为display: block;，无需为img和ul使用div。

此外，从正文中删除默认的8px边距：

body {
  margin: 0;
}

导航最好使用display: block;，因为您希望它占据整个宽度。

现在您可以使用float: left，float: right

＆＃13;

body {
  margin: 0;
}

#header-flex {
  display: block;
  position: fixed;
  background: rgb(0, 191, 255);
  height: 75px;
  width: 100%;
}

img {
  float: left;
}

#header-flex>ul {
  float: left;
  margin: 0;
}

.sign-in {
  float: right;
  margin: 25px;
}

＆＃13;

<header>
  <nav id="header-flex">
    <img src="logo.jpg" alt=logo width="30px" height="30px">

    <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 class="sign-in">
      <a href="___">Sign In</a>
    </div>

  </nav>
</header>

＆＃13;

如何使列表和段落内联并浮动？

2 个答案: