Question

我有一个垂直的NavBar，位于包装中。它工作正常，但是我的其余内容都在下面。我想将Vert Narbar的左侧宽度设置为20％，将其内容放在右侧。我需要在页脚中使用“清除”。

Navbar CSS [省略一些不必要的行]是：

div.wrapper {
  margin: 60px auto auto 8px;
  width: 220px;
}

p {
  /*4spaces*/
  font-family: georgia;
  font-size: 1rem;
  line-height: 25px;
  margin: 24px 0;
  text-align: center;
}

nav.vertical {
  border-radius: 14px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .15);
  overflow: hidden;
  text-align: center;
}

nav.vertical>ul {
  list-style-type: none;
}

nav.vertical>ul>li {
  display: block;
}

nav.vertical>ul>li>a {
  background-color: rgb(157, 34, 60);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  text-transform: uppercase;
  transition: all .35s ease;
  /*4spaces */
}

nav.vertical>ul>li>a:hover {
  background-color: rgb(114, 51, 98);
  cursor: pointer;
}

nav.vertical>ul>li>div {
  background-color: rgb(255, 255, 255);
}

nav.vertical>ul>li>div>ul {
  list-style-type: none;
}

nav.vertical>ul>li>div>ul>li>a {
  background-color: rgb(255, 255, 255);
  border-bottom: 1px solid rgba(0, 0, 0, .05);
  color: #333331;
  display: block;
  font-size: 1.1rem;
  padding: 10px 0;
  text-decoration: none;
  transition: all 0.35s linear;
}

nav.vertical>ul>li>div>ul>li:hover>a {
  background-color: lightBlue;
  color: rgb(255, 255, 255);
  padding: 10px 0 10px 50px;
}

<!-- 4 spaces  -->
<div class="wrapper">
  <nav class="vertical">
    <ul>
      <li>
        <a href="#">Category 1</a>
        <div>
          <ul>
            <li><a href="#">item 1</a></li>
            <li><a href="#">item 2</a></li>
            <li><a href="#">item 3</a></li>
          </ul>
        </div>
        <!-- 4 spaces  -->
      </li>
      <li>
        <a href="#">Category 2</a>
        <div>
          <ul>
            <li><a href="#">item 1</a></li>
            <li><a href="#">item 2</a></li>
            <li><a href="#">item 3</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </nav>
  <!-- 4 spaces  -->
</div>
<div style="padding-left:20px">
  <h1>Website Content Stuff</h1>

</div>

<!--  main content -->
<p>Ipsorum pro loekum text that we all hate</p>

我应该提到我从Adam-Bray在线获得了Navbar代码

Answer 1

您必须在.wrapper div上添加一个浮点数，因为它是一个块元素，所以它需要全宽并将内容移动到其下

如何在html / css中浮动div包装器？

1 个答案: