Question

试图设置一个简单的徽标和导航栏“备忘单”，以便我重复使用。我无法阻止右侧浮动的导航栏溢出到下面的内容中。

NB。我对此并不陌生，因此我在所有元素上都添加了边框，以帮助我了解发生了什么。

我试图在进行导航的元素上添加一个clear：left（尽管我知道应该是clear：right，因为内容已经向右浮动），但这当然没有用！

*{
box-sizing: border-box;
}
header{
  display: inline-block;
}
.logo{
    background-image: url("logo.png");
    background-repeat:no-repeat;
    width: 140px;
    height: 81px;
    margin: 10px;
    display: inline-block;
}

nav{
    border: 1px solid black;
    float: right;
    width: auto;
}
  ul{
    list-style: none;
    padding-left: 0;
    border: 1px solid red;
    vertical-align: middle;

  }
li{
  display: inline-block;
  width: auto;
  padding: 20px;
  background-color: yellow;
  margin-bottom: 5px;
  border: 1px solid yellow;

}
.divider{
  clear: both;
}

    <header>
      <div class="logo"></div>
    <nav>
      <ul>
        <li>About</li>
        <li>Portfolio</li>
        <li>Shopping</li>
        <li>Contact Me</li>
      </ul>
    </nav>
    </header>
    <div class="divider"></div>
    <main>
    <h1>The display Property</h1>

因此，接下来我尝试清除：两者都没有用。

我也尝试将导航设置为display：inline-block，但这没有用。

理想情况下，我想在不使用任何预先提供的模板且仅使用原始代码或display：flex的情况下解决此问题。

预先感谢：）

Answer 1

希望这会有所帮助。

.nav_bar {
    margin: 10px;
    padding: 10px;

    background-color: #00021a;
    color: white;
}

.logo {
    display: inline-block;
    vertical-align: middle;
    width: 7%;
}

.logo img {
    height: auto;
    width: 50px;
}

.nav {
    display: inline-block;
    vertical-align: middle;
    width: 90%;
}

.nav_container li {
    list-style: none;
    float: right;
    padding: 10px;
}

<head>
    <link rel="stylesheet" href="styles.css">
</head>
<div class="nav_bar">
    <div class="nav_container">

        <div class="logo">
            <img class="logo"
                 src="https://t4.ftcdn.net/jpg/00/71/26/83/240_F_71268376_KIbJvY0SYwlvikWpahjNCv5IBfukykG9.jpg"/>
        </div>

        <nav class="nav">
            <ul>
                <li>About</li>
                <li>Portfolio</li>
                <li>Shopping</li>
                <li>Contact Me</li>
            </ul>
        </nav>
    </div>
</div>

这里是Fiddle

调整窗口大小时，如何阻止右侧浮动的导航内容溢出

1 个答案: