Question

我正在尝试创建一个带有浮动嵌套列表的简单菜单。想法是一次显示所有嵌套列表（如大型菜单），但由于浮动元素清除了正确的浮动嵌套列表，所以我一直得到不需要的空白。

JSFiddle在这里：https://jsfiddle.net/agenturallison/mrf5e820/21/

问题是“ Level2 THIS” li元素上方的空间不应存在。

如何在不清除右侧任何内容的情况下强制浮动的LI元素浮动？

HTML代码：

ul {
  list-style:none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0;
  padding: 0; 
}

a {
  color: #fff;
}

#container {
  width: 400px;
}

#container li {
  width: 200px;
  float: left; 
  background: blue;
}

#container .level3 {
background: green;
height: 100px;
overflow: visible;
}

#container .level3 li {
  background: black;
  opacity: 0.5;
}

<ul id="container">

  <li><a href="#">Level 2</a>
    <ul class="level3">
      <li><a href="#">Level 3</a></li>
    </ul>
  </li>

	<li><a href="#">Level 2</a></li>
  
	<li><a href="#">Level 2</a></li>
  
	<li><a href="#">Level 2</a>
    <ul class="level3">
      <li><a href="#">Level 3</a></li>
    </ul>
  </li>
  
	<li><a href="#">Level 2 THIS</a></li>
  
	<li><a href="#">Level 2</a>
    <ul class="level3">
      <li><a href="#">Level 3</a></li>
   </ul>
  </li>
  
</ul>

like this

是我视觉上想要的一个示例

这是我想要摆脱的空间：JSFiddle screenshot

Answer 1

为什么不试试这个，它很干净，可以随意嵌套，学分至：https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h

if not set(sports).issubset(set(df['sport'])):
    print('no, the sports arent in the column')

Answer 2

我需要的答案由Pete作为注释提供（因此我无法将其标记为正确答案）。

解决方案是放弃浮点数，而改用column-count。我还向子元素添加了“ inline-block”，以避免按照How to prevent column break within an element?在元素内出现列中断。

ul {
  list-style:none;
  margin: 0;
  padding: 0;
  column-count:2;
  column-gap:0;
}

li {
  margin: 0;
  padding: 0; 
}

a {
  color: #fff;
}

#container {
  width: 400px;
}

#container li {
  width: 200px;
  background: blue;
  display: inline-block;
}

#container .level3 {
background: green;
height: 100px;
overflow: visible;
width: 200px; 
}

#container .level3 li {
  background: black;
  opacity: 0.5;
}

<ul id="container">

  <li><a href="#">Level 2</a>
    <ul class="level3">
      <li><a href="#">Level 3</a></li>
    </ul>
  </li>

	<li><a href="#">Level 2</a></li>
  
	<li><a href="#">Level 2</a></li>
  
	<li><a href="#">Level 2</a>
    <ul class="level3">
      <li><a href="#">Level 3</a></li>
    </ul>
  </li>
  
	<li><a href="#">Level 2 THIS</a></li>
  
	<li><a href="#">Level 2</a>
    <ul class="level3">
      <li><a href="#">Level 3</a></li>
   </ul>
  </li>
  
</ul>

谢谢！

嵌套列表不浮动

2 个答案: