Reputation: 2080
<nav class="navbar navbar-default" style="background-color: transparent; max-height: 40px;">
<div class="container-fluid">
<ul class="nav navbar-nav" style="margin-top: 0px; margin-bottom: 0px; padding-left: 15px;">
<li class=""><a href="#" class="" style="padding: 15px"><i class="glyphicon glyphicon-comment" style="color:royalblue;"></i></a></li>
<li class=""><a href="#" class="" style="padding: 15px"><i class="glyphicon glyphicon-option-horizontal" style="color:royalblue;"></i></a></li>
<li class="number_three_li"><a href="#" class="" style="padding: 15px"><i class="glyphicon glyphicon-option-horizontal" style="color:royalblue;"></i></a></li>
</ul>
</div>
</nav>
I want to align #number_three_li
to the right-side.
Like From here, I want to pull it to rhe right.
I saw some post saying pull-right
in <ul>
tag works well.
But because I want these <li>
tags not to be collapsed even width is narrower, that is not the right answer for me.
How can I do this?
.nav {
display: flex;
}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default" style="background-color: transparent; max-height: 40px;">
<div class="container-fluid">
<ul class="nav navbar-nav" style="margin-top: 0px; margin-bottom: 0px; padding-left: 15px;">
<li class=""><a href="#" class="" style="padding: 15px"><i class="glyphicon glyphicon-comment" style="color:royalblue;"></i></a></li>
<li class=""><a href="#" class="" style="padding: 15px"><i class="glyphicon glyphicon-list-alt" style=""></i></a></li>
<li class="#number_three_li"><a href="#" class="" style="padding: 15px"><i class="glyphicon glyphicon-option-horizontal" style="color:royalblue;"></i></a></li>
</ul>
</div>
</nav>
Upvotes: 0
Views: 48
Reputation: 2310
Use inline-block for the li's instead of flex for the nav ul. Then float the number_three_li to the right.
.nav {
//display: flex;
width: 100%;
}
.nav > li { display: inline-block !important; }
.number_three_li {
float: right;
}
@media (min-width: 768px) {
.navbar-nav>li.number_three_li {
float: right;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
</style>
<nav class="navbar navbar-default" style="background-color: transparent; max-height: 40px;">
<div class="container-fluid">
<ul class="nav navbar-nav" style="margin-top: 0px; margin-bottom: 0px; padding-left: 15px;">
<li class=""><a href="#" class="" style="padding: 15px"><i class="glyphicon glyphicon-comment" style="color:royalblue;"></i></a></li>
<li class=""><a href="#" class="" style="padding: 15px"><i class="glyphicon glyphicon-list-alt" style=""></i></a></li>
<li class="number_three_li"><a href="#" class="" style="padding: 15px"><i class="glyphicon glyphicon-option-horizontal" style="color:royalblue;"></i></a></li>
</ul>
</div>
</nav>
Upvotes: 1