对齐Materialize CSS可水平折叠？答案

【问题标题】：Aligning Materialize CSS collapsible horizontally?对齐Materialize CSS可水平折叠？
【发布时间】：2018-12-23 07:14:38
【问题描述】：

我正在尝试通过水平对齐它们来更改具体化 css 中的默认可折叠行为。通过使用以下代码，我取得了部分成功：

<!DOCTYPE html>
<html>
<head>
  
  
  <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
  
  <link rel = "stylesheet"
  href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">          
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
  </script>

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>
<body >
<br><br><br><br>


  <ul style="display: inline" class="collapsible">
    <li style="display: inline">
      <div style="display: inline"class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div style="display: none"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li style="display: inline">
      <div style="display: inline"class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div style="display: none"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li style="display: inline">
      <div style="display: inline"class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div style="display: none"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>
     <script>
 $(".collapsible").collapsible()
</script>   
</body>

</html>

但是当我点击第一个 collapsible-header 时，另外两个 collapsible header 会落在第一个 collapsible 的 collapsible-body 下方。

当我点击第二个可折叠标题时，第一个可折叠标题是固定的（很好），但第三个可折叠标题下降到第二个可折叠标题的主体下方。

单击最后一个可折叠标题可以正常工作（如预期）。

有人可以给我一个解决方法吗？

提前致谢，尼基尔

【问题讨论】：

这行不通 - 该组件并非设计为水平工作 - 使用设计为水平工作的组件，例如 accordionslider.com 或尝试搜索 html horizontal accordion跨度>

标签： javascript jquery html css materialize

【解决方案1】：

您必须将position: absolute 设置为collapsible-body 但这不是一个完美的方法，因为正如@ic3b3rg 所提到的，此组件并非设计为水平工作，因此您可以使用tabs 或任何其他水平手风琴。

<!DOCTYPE html>
<html>
<head>
  
  
  <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
  
  <link rel = "stylesheet"
  href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">          
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
  </script>

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>
<body >
<br><br><br><br>


  <ul style="display: inline" class="collapsible">
    <li style="display: inline">
      <div style="display: inline"class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div style="display: none;position:absolute;"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li style="display: inline">
      <div style="display: inline"class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div style="display: none;position:absolute;"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li style="display: inline">
      <div style="display: inline"class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div style="display: none;position:absolute;"class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>
     <script>
 $(".collapsible").collapsible()
</script>   
</body>

</html>

【讨论】：