CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Michael
Michael

Reputation: 13636

How to make two ul li elements inline?

I have this ul element in my page:

            <ul class="nav pull-left" style="width: 90px; list-style-type: none;margin: 0; padding: 0;">             
                <li><a href="#" style="display: inline-block;text-align: center;"><i class="glyphicon glyphicon-tree-conifer"></i> <br> sites</a></li>
                <li><a href="#" style="display: inline-block;text-align: center;"><i class="glyphicon glyphicon-tree-conifer"></i> <br> events</a></li>         
            </ul>

Here how it looks:

enter image description here

I need to change the appearance above and to make both elements inline:

enter image description here

I tried this example. But I didn't get desired result. How can I make to elements inline?

Upvotes: 0

Views: 3950

Answers (4)

Jishnu V S
Jishnu V S

Reputation: 8407

Just try with this code . for viewing glyphicon we must add bootstrap , and thats why i have added background color and width, height property set as a demo , copy paste this to a html page

.nav li {
    display:inline-block;
    width:47%;
    background:#999;
}
.nav li i {
    background: #000 none repeat scroll 0 0;
    display: block;
    height: 10px;
    width: 10px;
    margin:0 auto;
}
<ul class="nav pull-left" style="width: 90px; list-style-type: none;margin: 0; padding: 0;">
  <li><a href="#"><i class="glyphicon glyphicon-tree-conifer"></i>sites</a></li>
  <li><a href="#"><i class="glyphicon glyphicon-tree-conifer"></i>events</a></li>
</ul>

Upvotes: 1

Joseph Marikle
Joseph Marikle

Reputation: 78590

I see this question is marked as . It appears you are trying to use the built in .nav class, but you're also trying to align it left. You're also missing a class to make .nav work. It takes two parts to define a bootstrap nav (e.g. nav nav-navbar, nav nav-pills). I would recommend using .nav-pills. That will make the pull-left unnecessary and you can remove it. You should also remove those inline styles. To center the glyphicon, just use .text-center or create a custom style. Please, do not inline styles.

@import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css)
<ul class="nav nav-pills">             
  <li><a href="#" class="text-center"><i class="glyphicon glyphicon-tree-conifer"></i><br>sites</a></li>
  <li><a href="#" class="text-center"><i class="glyphicon glyphicon-tree-conifer"></i><br>events</a></li>         
</ul>

Upvotes: 2

Karthikeyan Vedi
Karthikeyan Vedi

Reputation: 1360

You can try using display:inline-flex in <ul> tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<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>


<ul class="nav pull-left" style="width: 90px; list-style-type: none;margin: 0; padding: 0;display:inline-flex;">
  <li><a href="#" style="text-align: center;"><i class="glyphicon glyphicon-tree-conifer"></i> <br> sites</a>
  </li>
  <li><a href="#" style="text-align: center;"><i class="glyphicon glyphicon-tree-conifer"></i> <br> events</a>
  </li>
</ul>

Upvotes: 3

Greg Burkett
Greg Burkett

Reputation: 1945

You have the "display:inline-block" style applied to the <A> tag, instead of the <LI> tag. Switch it over to the LI tag and it should look correct for you.

Also, you should probably try to avoid putting styles directly on tags like this, and instead use an attached stylesheet. Imagine you had to change 30 of these, that'd be a huge pain. If you had a stylesheet, you'd only have to change one small line.

Upvotes: 3

Related Questions