Question

我正在尝试将图标浮动到可折叠标题的右边缘，但它无法正常工作。我使用style="float:right"，但图标停留在同一个地方。这是代码：

＆＃13;

$(document).ready(function () {
    $('.collapsible').collapsible();
});

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Course List</title>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>

<div class="row">
 <div class="container">
  <div class="col s8">
   <ul class="collapsible expandable">
    <li>
      <div class="collapsible-header">
        <span>Functions</span>
        <i class="material-icons blue-text" style="float:right">add</i>
      </div>
      <div class="collapsible-body">
        <span>Lorem ipsum dolor sit amet.</span> 
      </div>
     </li>
    </ul>
   </div>
  </div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script src="app.js"></script>
</body>
</html>

＆＃13;

Answer 1

$(document).ready(function () {
	$('.collapsible').collapsible();
});

.collapsible-header {
    display: flex;
    justify-content: space-between;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Course List</title>
	<!--Import Google Icon Font-->
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<!-- Compiled and minified CSS -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
	<!--Let browser know website is optimized for mobile-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>

<div class="row">
   <div class="container">
		<div class="col s8">
			<ul class="collapsible expandable">
			   <li>
			     <div class="collapsible-header">
			     	<span>First Item</span>
			     	<i class="material-icons blue-text">add</i>
			     </div>
			     <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
			   </li>
			 </ul>
		</div>
	</div>
</div>


 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
 <script src="app.js"></script>
</body>
</html>

Answer 2

检查以下片段，您可以根据需要调整图标与右端的距离。

我在下面添加了css

.collapsible-header {
    position: relative;
}

.collapsible-header i.material-icons.blue-text {
    position: absolute;
    right: 0;
}

＆＃13;

$(document).ready(function () {
	$('.collapsible').collapsible();
});

＆＃13;

.collapsible-header {
    position: relative;
}

.collapsible-header i.material-icons.blue-text {
    position: absolute;
    right: 0;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Course List</title>
	<!--Import Google Icon Font-->
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<!-- Compiled and minified CSS -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
	<!--Let browser know website is optimized for mobile-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>

<div class="row">
   <div class="container">
		<div class="col s8">
			<ul class="collapsible expandable">
			   <li>
			     <div class="collapsible-header">
			     	<span>Functions</span>
			     	<i class="material-icons blue-text" style="float:right">add</i>
			     </div>
			     <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
			   </li>
			 </ul>
		</div>
	</div>
</div>


 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
 <script src="app.js"></script>
</body>
</html>

＆＃13;

如何在materialize css中向右侧浮动图标？

2 个答案: