Question

我试图在我的水平菜单栏下面的垂直菜单栏下方离开我的部分，但似乎无法确定我出错的地方。

我使用了显示器和浮动，但它们似乎不适用于垂直部分。

有什么想法吗？它可能是我忽略了一个小细节

＆＃13;

/* Section - Horizontal menu bar */
.horizontal_menu_bar_section {
  width: 100%;
  float: left;
  display: block;
  background: #FFCC00;
}

/* Section - Vertical menu bar */
.vertical_menu_bar_section {
  float: left;
  color: #999999;
  background: #FF0000;
  font-family:'Trebuchet MS', Tahoma, Sans-serif;
  display: block;
}

＆＃13;

<section class="horizontal_menu_bar_section">
  <ul id="menu_bar">

    <li><a href="#">DASHBOARD</a></li>
    <li><a href="#">UPLOAD</a></li>
    <li>
      <a href="#">OPTION 3</a>
      <ul class="noJS">
        <li><a href="#">OPTION 3 A</a></li>
        <li><a href="#">OPTION 3 B</a></li>
        <li><a href="#">OPTION 3 C</a></li>
      </ul>
    </li>
    <li><a href="#">OPTION 4</a></li>
    <li><a href="#">OPTION 5</a></li>

  </ul>
  <section>

    <section class="vertical_menu_bar_section">
      <div id='cssmenu'>
        <ul>
          <li class='active'><a href='#'><span>Home</span></a></li>
          <li><a href='#'><span>Products</span></a></li>
          <li><a href='#'><span>Company</span></a></li>
          <li class='last'><a href='#'><span>Contact</span></a></li>
        </ul>
      </div>
      <section>

＆＃13;

Answer 1

刚刚意识到我的问题是我没有使用该属性清除：两者都是为了防止出现在右边（或我的部分左侧）的任何内容。

对我有用的解决方案是添加clear: both;并删除float: left;属性。

左对齐部分或div

1 个答案: