CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
executable
executable

Reputation: 3590

How to align li element depending on left and right element in navbar

I want to align an element between two floating <li>

I have the following : 

ul > li {
    display: inline-block;
    display:inline;
}

ul{
  text-align: center
}

#left{
  float: left
}

#right{
  float: right
}

#mid{
    margin-left: auto;
    margin-right: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-default" role="navigation">
  <ul id="list_navbar" class="nav navbar-nav">
    <li id="left">LEFT</li>
    <li id="right">RIGHT</li>
    <li id="mid">MID</li>
  </ul>
</nav>

The mid element isn't centered in big scree but when I remove the class nav navbar-nav from <ul> elements :

ul > li {
    display: inline-block;
    display:inline;
}

ul{
  text-align: center
}

#left{
  float: left
}

#right{
  float: right
}

#mid{
    margin-left: auto;
    margin-right: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-default" role="navigation">
  <ul id="list_navbar">
    <li id="left">LEFT</li>
    <li id="right">RIGHT</li>
    <li id="mid">MID</li>
  </ul>
</nav>

How can I align without deleting the class ?

Upvotes: 1

Views: 1203

Answers (2)

Ranjith v
Ranjith v

Reputation: 1062

can you try this. here some bootstrap code taken minus margin.. now we have overight the code .navbar-nav

css

ul > li {
    display: inline-block;
    display:inline;
}

ul{
  text-align: center
}

#left{
  float: left
}

#right{
  float: right
}

#mid{
    margin-left: auto;
    margin-right: auto;
}
.navbar-nav{
  width:100%;
  margin: 7.5px 0px !important;
}

Upvotes: 1

Ren&#233; Pedersen
Ren&#233; Pedersen

Reputation: 36

Instead of floats, you could consider using flexbox. It comes with this kind of setup right out of the box.

So the direct answer could be this:

ul{
  display: flex;
  justify-content: space-between;
}

The justify-content: space-between; rule will do just what you want, and set as much space between your li's as possible. It will do this by the order of your li's, so you need to edit your code and set the middle one in the middle of your li structure.

Updated with snippet

ul {
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-default" role="navigation">
  <ul id="list_navbar">
    <li>LEFT</li>
    <li>MID</li>
    <li>RIGHT</li>
  </ul>
</nav>

Notices that UL elements as default has a padding that i have removed in this snippet. I have also removed all the other ID's you used for the li's since they are not needed for this to work as intended.

Hope it helps.

Upvotes: 2

Related Questions