我试图通过水平对齐它们来更改具体化 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>但是当我点击第一个可折叠标题时，其他两个可折叠标题会下降到第一个可折叠标题的可折叠正文下方。
当我点击第二个可折叠标题时，第一个可折叠标题固定(正常)但第三个可折叠标题下降到第二个可折叠标题的主体下方。
点击最后一个可折叠标题工作正常(如预期)。
有人可以给我一个解决方法吗？
提前致谢， 尼克尔
最佳答案
你必须将 position: absolute 设置为 collapsible-body 但这不是一个完美的方法，因为正如@ic3b3rg 所提到的，这个组件并不是为了水平工作，因此您可以使用 tabs 或任何其他水平 Accordion 。
<!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>关于javascript - 水平对齐 Materialise CSS 是否可折叠？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53901892/