css - 在 div 中 float 列表

Question

我想做一个可折叠的按钮，在单击时打开一个元素列表，我试图 float 留在按钮内的元素，但它似乎不起作用。

.collapsible-group {
  overflow: hidden;
}

.collapsible-content {
  float: left;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  display: block;
}

.collapsible {
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 33%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 15px;
  background-color: Transparent;
  display: block;
  margin: auto;
}

<div class="collapsible-group">
  <button class="collapsible">Modern Trade</button>
  <div class="collapsible-content">
    <ul>
      <li>num 1</li>
      <li>num2</li>
      <li>num3</li>
      <li>num4</li>
    </ul>
  </div>
</div>

Answer 1

请尝试以下操作

<div class="collapsible-content">
  <ul class=my-float"> <li>num 1</li>
  <li>num2</li>
  <li>num3</li>
  <li>num4</li></ul>

//在你的 css 文件中添加这个

.my-float li{
  float:left;
}