Question

我在div中创建了一个侧面菜单，并为侧面菜单的desc添加了另一个div。但是当我尝试添加第二个div时，它就会出现在第一个div的底部。我怎样才能解决这个问题。请帮帮我。给html和css。

.sidemenu ul{
    margin: 0;
    padding: 5px;
    background-color: background;
    width: 15%;
    list-style-type: square;
    height: 100%;
}
.sidemenu li{
    padding: 5px;
}
.topics ul{
    margin-left: 10px;
    padding: 10px;
    position: absolute;
    float: right;
}

        <div class="sidemenu">

            <ul>
                <li><b>Categories</b></li>
                <hr style="margin-top: -2px;">
                <li><a href="">Categoryname</a></li>
            </ul>

        </div>
        
<div class="topics">
            <ul>
                <li>
                    <font size="2" face="Verdana, Arial">
                        <b>
                            
                                Topicname
                            
                        </b>                
                    </font>                    
                </li>
                
            </ul>

        </div>

Answer 1

使用简单的浮子？将float: right提供给侧边菜单UL。

＆＃13;

.sidemenu ul{
    margin: 0;
    padding: 5px;
    background-color: background;
    width: 15%;
    list-style-type: square;
    height: 100%;
    float: right;
}
.sidemenu li{
    padding: 5px;
}
.sidemenu li.sep {margin: 0; padding: 0; list-style: none;}
.sidemenu li.sep hr {margin-top: -3px;}
.topics ul{
    margin-left: 10px;
    padding: 10px;
    position: absolute;
    float: right;
}

＆＃13;

<div class="sidemenu">
  <ul>
    <li><b>Categories</b></li>
    <li class="sep"><hr /></li>
    <li><a href="">Categoryname</a></li>
  </ul>

</div>

<div class="topics">
  <ul>
    <li>
      <font size="2" face="Verdana, Arial">
        <b>

          Topicname

        </b>                
      </font>                    
    </li>

  </ul>

</div>

＆＃13;

Answer 2

将float:right添加到此课程.sidemenu ul{}

Answer 3

  .sidemenu ul{
    margin: 0;
    padding: 5px;
    background-color: background;
    width: 15%;
    list-style-type: square;
    height: 100%;
  float: right;
}
.sidemenu li{
    padding: 5px;
}
.topics ul{
    margin-left: 20px;
    padding: 10px;
    position: absolute;
    add Width Property;
}

并保持html原样

如何在侧边菜单的右侧对齐<ul>？

3 个答案: