CODEWITHSUNDEEP
htmlcss
theyuv
theyuv

Reputation: 1624

Right align and left align ul li elements in horizontal navigation bar

I am coding a horizontal navigation bar for my site.

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: white;
  margin: 15px auto;
  border: 1px solid black;
}

header {}

ul {
  list-style: none;
  padding: 1em 0;
  border-bottom: 2px solid #61f231;
  border-top: 2px solid #61f231;
}

li {
  display: inline;
  padding: 0 1.5em;
  border-left: 2px solid #61f231;
}

li.special_text {
  font-size: 200%;
  font-weight: bold;
  color: black;
  font-family: "Arial Black";
}

li.special_text a {
  text-decoration: none;
}
<nav>
  <ul>
    <li class="special_text"><a href="#">Hello1</a></li>
    <li><a href="#">Hello2</a></li>
    <li><a href="#">Hello3</a></li>
  </ul>
</nav>

I would like to have some <li> elements aligned left while others align right.

When I try to float the ones that I want left or right there is a problem with the vertical alignment (the elements are no longer vertically aligned within the <ul> element.

Part of the problem arises from the fact that the first <li> element uses a different size font.

Upvotes: 10

Views: 53633

Answers (5)

Glenn Ferrie
Glenn Ferrie

Reputation: 10390

If you are using bootstrap 5 you can use the css class named: flex-row-reverse

This will display the navbar items aligned from right to left. This is the best way I have found that also plays well with smaller screens and mobile browsers.

Sample Code:

<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between bg-warning">
<ul class="navbar-nav flex-grow-1 flex-row-reverse ">
    <li class="nav-item">
        <a class="nav-link text-light" asp-area="" asp-controller="About" asp-action="Index">About</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-light" asp-area="" asp-controller="Contact" asp-action="Index">Contact</a>
    </li>
</ul>

Upvotes: 0

starvator
starvator

Reputation: 1017

All you need to do is wrap what you want in divs and float them left and right:

<nav>
        <ul><div class="floatleft">
                <li class="special_text"><a href="#">Hello1</a></li>
            </div>
            <div class="floatright">
                <li><a href="#">Hello2</a></li>
                <li><a href="#">Hello3</a></li>
            </div>
        </ul>
</nav>

and add to your css:

.floatleft {
    float:left;
}
.floatright {
    float:right;
}

To fix the issue with vertical aligning, you need to mess around with line-height with the affected li elements

Check out the fiddle

Upvotes: 14

Moob
Moob

Reputation: 16184

It's not entirely clear to me what you are trying to achieve so here are two possibilities based on my interpretation(s) of your requirements:

To Have Left and Right Columns:

You could use CSS3 Columns so long as you're okay with it falling-back to a regular (non-columned) ul or polyfilling for crappy browsers (ahem <=IE9) 

nav ul {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  -webkit-column-width: 50%;
     -moz-column-width: 50%;
          column-width: 50%;
    -webkit-column-gap: 4em;
       -moz-column-gap: 4em;
            column-gap: 4em;
}
<nav>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
    </ul>
</nav>

See:
http://caniuse.com/#feat=multicolumn
http://css-tricks.com/guide-responsive-friendly-css-columns/


To Range The Text:

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: white;
    margin: 15px auto;
    border: 1px solid black;
}

header {

}

ul {
    list-style: none;
    display:table;
    width:100%;
    padding: 1em 0;
    border-bottom: 2px solid #61f231;
    border-top: 2px solid #61f231;
}

li {
    display: table-cell;
    padding: 0 1.5em;
    border-left: 2px solid #61f231;
    vertical-align:middle;
    text-align:center;
}

li.special_text {
    font-size: 2em;
    font-weight: bold;
    color: black;
    font-family: "Arial Black";
    text-align:left;
}
li.range_left {
    text-align:left;
}
li.range_right {
    text-align:right;
}

li.special_text a {
    text-decoration: none;
}
<nav>
    <ul>
        <li class="special_text"><a href="#">Hello1</a></li>
        <li class="range_left"><a href="#">Hello2</a></li>
        <li><a href="#">Hello3</a></li>
        <li class="range_right"><a href="#">Hello4</a></li>
    </ul>
</nav>

Upvotes: 2

Edwin
Edwin

Reputation: 825

Alternatively you can add padding like this: li:first-child{padding-right: 150px;}

See my fiddle

Upvotes: 0

DaniP
DaniP

Reputation: 38252

If your items will not have more than one line of text you can use line-height to set the vertical algnment. Try this:

ul {
    list-style: none;
    border-bottom: 2px solid #61f231;
    border-top: 2px solid #61f231;
    line-height:2.5em;
}

/*Remove the padding*/

Check this Demo Fiddle

Upvotes: 0

Related Questions