看看这两张图片，请告诉我发生了什么事？
为什么图标会移动？
我坚持了一个小时......
图标必须在右侧或左侧对齐，3个图标为＆＃34;向左浮动＆＃34;但仍然看起来像这样......
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Duall Sistemas</title>
<!-- Bootstrap core CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/materialize.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link rel="stylesheet" type="text/css" href="libs/bootstrap/bootstrap-social.css">
<link rel="stylesheet" type="text/css" href="libs/font-awesome/css/font-awesome.css">
<base href="/index.ejs">
</head>
<body>
<div class="navbar-fixed">
<nav>
<div class="row">
<div class="col s12 ">
<div class="nav-wrapper">
<a href="/home" class="brand-logo">Duall Sistemas</a>
<a href="#" data-activates="mobile-demo" class="button-collapse right"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="/home">Principal</a></li>
<li><a href="/contact">Contato</a></li>
<li><a href="/about">Sobre</a></li>
</ul>
<!-- Menu para Mobile -->
<ul class="side-nav" id="mobile-demo">
<li>
<div class="userView">
<img class="background" src="img/image03.jpg">
<a href="#!user"><img class="circle" src="img/duallsistemas.png"></a>
<a href="/home"><span class="white-text name">Duall Sistemas</span></a>
<a href="#!email"><span class="white-text email">duallsistemas@gmail.com</span></a>
</div>
</li>
<li><a href="/home"><i class="material-icons">home</i>Principal</a></li>
<li><a href="/contact"><i class="material-icons">mail</i>Contato</a></li>
<li><a href="/about"><i class="material-icons">favorite border</i>Sobre</a></li>
</ul>
<script>
$(document).ready(function(){
$(".button-collapse").sideNav({
closeOnClick: true
});
})
</script>
</div>
</div>
</div>
</nav>
</div>
<!-- DIV que recebe as VIEWs na pasta Partials de acordo com os Controlleres -->
<div class="container" id="container-main">
<div ng-view>
</div>
</div>
<!-- Scripts para inicializar o Angular e seus Controladores -->
<script type="text/javascript" src="libs/jquery/jquery.js"></script>
<script type="text/javascript" src="js/materialize.js"></script>
<script type="text/javascript" src="libs/angular/angular.js"></script>
<script type="text/javascript" src="libs/angular-route/angular-route.js"></script>
<script type="text/javascript" src="libs/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="libs/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="js/controllers/homeController.js"></script>
<script type="text/javascript" src="js/controllers/navController.js"></script>
<script type="text/javascript" src="js/controllers/aboutController.js"></script>
<script type="text/javascript" src="js/controllers/contactController.js"></script>
<script type="text/javascript" src="js/services/Api.js"></script>
</body>
</html>
答案 0 :(得分：1)
看起来您将图标浮动到左侧，并且以下元素正在捕捉它。
尝试在lis上设置清除左侧。
li {clear: left;}