Why isn't my text inline?
Question
Not really sure why my register and login are right on top of each other. Probably a simple fix, but I'm pretty newish to this. I would also like to keep the dropdown menu to be right underneath the login text which is also having some issues. I just can't seem to get it to be like a normal dropmenu. A good example would of what I want to achieve would be the help box at the top of the stackoverflow site. jsfiddle: http://jsfiddle.net/Karmatix/v2z5bnvh/
Also if you could explain the solution I would greatly appreciate it. I would like to learn why I'm wrong and understand the solution so it doesn't happen again. Thanks in advance!
html (got some jquery but that isn't the issue)
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('li').hover(function(){
$(this).find('ul>li').fadeToggle(400);
});
});
</script>
<link rel="stylesheet" type="text/css" href="text.css"
</head>
<body>
<nav>
<ul>
<li>Login
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>Register</li>
</ul>
</nav>
</body>
</html>
css
body {
padding: 0;
margin: 0;
}
nav ul{
margin: 0;
padding: 0;
list-style:none;
}
nav ul li{
float: right;
width: 100%;
height: 30px;
line-height: 30px;
text-align: right;
background-color: #000;
color: #fdfdfd;
display: inline;
}
nav ul li a{
text-decoration: none;
color: #fdfdfd;
}
nav ul li li {
display: none;
color: #fdfdfd;
}
4 answers
solution1
2 2015-01-15 15:26:45
Your li tags have width: 100% on them, so they're taking up the full width of the page, then stacking. Setting them to width: auto (or removing the width, or setting it to a value) will fix that.
solution2
1 2015-01-15 15:25:56
You have set the width to the floated li elements to 100%, so naturally, they will be positioned on two lines, one above the other.
Perhaps you meant to use width of 50%, which would place the two li next to each other on single line.
nav ul{ margin: 0; padding: 0; list-style:none; } nav ul li{ float: right; width: 50%; height: 30px; line-height: 30px; text-align: right; background-color: #000; color: #fdfdfd; display: inline; } nav ul li a{ text-decoration: none; color: #fdfdfd; } nav ul li li { display: none; color: #fdfdfd; }
<nav> <ul> <li>Login <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </li> <li>Register</li> </ul> </nav>
solution3
1 2015-01-15 15:25:57
This is your problem: width: 100%;
As the li width is set to take up the full width of the page, it is forcing the next li below it.
Remove this line and it will work as expected.
solution4
1 ACCPTED 2015-01-15 15:36:45
The simple reason as to why your list isn't inline is because you are calling width:100% on each list item. So there is no room for them to sit next to each other with each one taking up 100% of the width. But you also have a few structural issues in your CSS that could be corrected to help this example and future elements you may add to this nav bar.
1) You're trying to set all of your styles on the li tag (code below). For one you're using both float:right and display:inline which is not necessary. In your case you don't need to float your li s ( *1 ) (and I would use inline-block instead because inline doesn't take the width and height of its children ( *2 )). Next you can remove the background-color ( *3 ) and width ( *4 ) so we can add them to a parent.
nav ul li{
/*float: right;*/ //remove (*1)
/*width: 50%;*/ //remove (*4)
height: 30px;
line-height: 30px;
text-align: right;
/*background-color: #000;*/ //remove (*3)
color: #fdfdfd;
display: inline-block; //changed (*2)
}
2) Set up your nav container to have the color and width instead since it is the parent and could potentially hold other elements like a logo. Also add overflow:hidden which will be used to clear the float we're about to add to the unordered list:
nav{
background-color: #000;
width: 100%;
overflow: hidden;
}
3) Finally, to float the whole list container to the right, add the float: right property to the list's parent ul instead ( *1 ):
nav ul{
float: right; //add (*1)
margin: 0;
padding: 0;
list-style:none;
}
Now your list will be inline and floating to the right like you wanted:
EXAMPLE 1
DROPDOWN UPDATE
In order to get the dropdown to work, you'll need to change a few more things:
1) The parent ul should be hidden, not the list item. So remove display: none from li :
nav ul li li {
/*display: none;*/ //remove
color: #fdfdfd;
}
2) Instead add it to the parent ul ( #1 ). You also need to position this element so that it appears outside it's container. You can do this using position:absolute ( *2 )
nav ul li ul {
background: #000;
position: absolute; //add (*2)
display: none; //add (*1)
padding: 10px; //add other styling rules if needed
}
3) Positioning elements as absolute removes them from the flow of the document and makes them relative to the body if not otherwise specified. So to contain it from shifting to the furthest top/left corner you'll need position: relative to add to it's parent which is nav ul li :
nav ul li{
display: inline-block;
vertical-align: top;
height: 30px;
line-height: 30px;
color: #fdfdfd;
position: relative; //add
cursor: pointer; //you can add this if you want - mouse pointer
}
4) Last, you'll need to correct something I had added above but now needs to change. That's overflow: hidden on nav . Originally I added it to clear the floated ul element, but (if it's not self-explanatory) what it does is hide the "overflow" (including an absolute positioned element "overflowing" it's boundaries). In this case the overflow needs to be shown because of the dropdown menu. So remove that ( 1* ) and use a clearfix instead ( *2 ):
nav{
background-color: #000;
width: 100%;
/*overflow: hidden*/ //remove (*1)
}
nav:after{ //use ':after' to clear the elements (*2)
content: "";
display: block;
clear:both;
}
5) Bonus : Also in your jQuery, to prevent an animation build up where it triggers the action over and over on hover you can add .stop() just before fadeToggle() :
$(this).find('ul').stop().fadeToggle(400);
EXAMPLE 2
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.