I am coding a horizontal navigation bar for my site. The html is as follows:
<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>
The css is as follows:
* {
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;
}
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.
Any suggestions?
Thank you
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
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:
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/
* { 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>
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
Alternatively you can add padding like this: li:first-child{padding-right: 150px;}
See my fiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.