Question

我的HTML

中有以下ul标记

<ul style="position:absolute">
    <li>list 1</li>
    <li>list 2</li>
    <li>list 3</li>
    <li>
        list 4
        <p>list 4 content goes here</p>
    </li>
</ul>

从该标记开始，我想实现以下布局。

+-----------+-------------------------+
| list 1    | list 4                  |
| list 2    | list 4 content goes here|
| list 3    |                         |
+-----------+-------------------------+

到目前为止，我正在尝试列出清单1 - 清单3 float:none和清单4 float:left，但没有运气..清单4放在底部。

如何实现它？

CSS

ul.parent-menu>li>ul.sub-menu{
    display: none;
    position: absolute;
    width: 1000px;
    padding: 0;
    list-style: none;
    background: #b6b6b6;
    border-top: 5px solid #b81d18;
    z-index: 10;
}

ul.parent-menu>li:hover>ul.sub-menu{
    display: block;
    list-style: none;
}

ul.parent-menu>li:hover>ul.sub-menu>li{
    float: none;
    width: 250px;
    padding: 10px 20px;
}

ul.parent-menu>li:hover>ul.sub-menu>li.menu-item-has-children{
    float: left;
    width: 250px;
    padding: 10px 20px;
}

所以，我想float:none所有没有li类的menu-item-has-children。

Answer 1

body {
  overflow: hidden;
}
ul {
  width: 100%;
  float: left;
}
ul li {
  float: none;
}
.list4 {
  position: absolute;
  top: 0;
  left: 40%;
}

<ul style="position:absolute">
  <li>list 1</li>
  <li>list 2</li>
  <li>list 3</li>
  <li class="list4">
    list 4
    <p>list 4 content goes here</p>
  </li>
</ul>

试试这个

Answer 2

css可以在所有标签上实现，或者 1.来区分li，最佳实践是应用类属性或 2.创建两个单独的ul并应用不同的css float。

list float none与float左右相结合

2 个答案: