Menu
good evening. The below code is for my navigation bar on my website.The two unordered lists are currently sat side by side (inline) which is what I wanted. However, I would like the second sat over on the right had side. I know there are several ways to achieve this. My question is specific to this method, as I do not understand why it is happening. Why is it, if I add the following code to my style sheet (.float { float: right }), the second moves to the right, but does not stay 'inline' with the first ; it shows on a slightly different level? I do not understand why this is the case. Would someone be kind enough to explain?
Secondly, if I add a different class to each of the unordered lists and float one to the right and one to left, simaultaneously removing the CSS ( .nav ul {display: inline; ), I do not understand why it is that they sit 'inline' with each other? What is instructing them to do so? How does a float: right instruction, also instruct the element to move up besides the one on the left? Many Thanks display: inline; }
http://jsfiddle.net/mugman/rnmht1y2/
<body>
<div class="nav">
<div class="container">
<ul>
<li><a href="#">Name</a></li>
<li><a href="#">Browse</a></li>
</ul>
<ul class="float">
<li><a href="#">Sign Up</a></li>
<li><a href="#">Log In</a></li>
<li><a href="#">Help</a></li>
</ul>
<style>
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.nav ul {
display: inline;
}
745
An element is said to be inline-level when the calculated value of its display CSS property is: inline, inline-block or inline-table. Visually, it doesn't constitute blocks of contents but is distributed in lines with other inline-level content. Typically content of a paragraph, being text, with different formatting like emphasis, or images, is made from inline-level elements. (from: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Visual_formatting_model)
If you apply inline-block to your "nav ul" your elements will display inline.
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.nav ul {
display: inline-block;
}
.float {
float: right;
}<!DOCTYPE html>
<body>
<div class="nav">
<div class="container">
<ul>
<li><a href="#">Name</a></li>
<li><a href="#">Browse</a></li>
</ul>
<ul class="float">
<li><a href="#">Sign Up</a></li>
<li><a href="#">Log In</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
answered Feb 28 '26 22:02
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With