Andiie Andiie - 4 months ago 18
HTML Question

Aligns the icons left materialize?

Look at this two images, and please tell me what is going on?

Why the icons moving ?

Image 01

Image 02

i'm stuck on this for about an hour...

The icons must be align on the right or left, the 3 icons are "floating left" but still look like this...



<!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>




Answer

It looks as though you are floating your icons to the left and the following elements are catching on it.

Try setting clear left on your lis.

li {clear: left;}
Comments