css - 不能将垂直菜单列表移到最左边，它在水平菜单列表下面

Question

CSS 新手。尝试使用列表创建水平和垂直菜单。我在水平菜单下的垂直列表转到下一行，但它从水平菜单结束的地方开始，就像缩进选项卡一样。如何让垂直菜单移到最左边？

CSS 和 HTML 代码:

ul {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 1.2em;
  margin-left: 20px;
  list-style-type: none;
}
li {
  background-image: url(../images/listimage.jpg);
  background-repeat: no-repeat;
  background-position: 0% 50%;
  margin: 0px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 16px;
}
.clearfloat {clear:both;
  height:0;
  font-size: 1px;
  line-height: 0px;
}
#horizontal_M  {
  color: #FFFFFF;
  background-color: #272910;
  background-image: url(../images/btn.jpg);
  background-repeat: repeat-x;
  background-position: bottom;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #FFFFFF;
  width: 100%;
  height: 31px;
}
#vertical_M   {
  background-color: #EEF0E3;
  background-image: url(../images/sidemenubg.jpg);
  background-repeat: repeat-x;
  background-position: bottom;
  margin-top: 0px;
  margin-right: 15px;
  margin-bottom: 0px;
  margin-left: 15px;
  padding-top: 20px;
  padding-right: 0px;
  padding-bottom: 14px;
  padding-left: 0px;
  float: left;
  width: 200px;
}

<div id="horizontal_M">
  <ul>
    <br class="clearfloat" />

    <li><a href="index.html">link 1/a></li>
    <li><a href="index.html">link 2</a></li>
    <li><a href="index.html">link 3</a></li>
    <li><a href="index.html">link 4</a></li>
  </ul>

</div>

<div id="vertical_M">
  <ul>

    <li><a href="index.html">link 1</a></li>
    <li><a href="index.html">link 2</a></li>
    <li><a href="index.html">link 3</a></li>
    <li><a href="index.html">link 4</a></li>
  </ul> 
</div>

Answer 1

您不需要容器 div。可以设置样式<ul>相反。

水平<li>应该是 float: left;

垂直<ul>设置 clear:left;