I'm looking to create a navigation menu with list items rendered in one line. How do I do this?
li {
display: inline;
}
EDIT: I now realize why I felt strange answering with display: inline: because I usually use float: left myself instead, which is anthony-arnold's answer (so to him goes my upvote!).
Anyway, while either method will cause your lis to display in one line, inline elements and floated elements do behave differently. Depending on how you've styled your layout, you may have to choose one or the other.
You could also do this, for some situations:
li {
float: left;
}
My favorite way to do it it's by using because it's allow do use width, height, margins and padding:
li { display: inline-block; }
But have some render problem in IE, to fix use (order is important):
li
{
display: inline-block;
zoom: 1;
*display: inline;
}
One of the best resources on the subject is http://css.maxdesign.com.au/listamatic/ (a little outdated though).
They suggest both li {display: inline;} and li {float: left;} depending on the effect you want.
Look for example their "Simple horizontal list" http://css.maxdesign.com.au/listamatic/horizontal01.htm
ul {
float: right; to <li> go to the Right or Left side
}
ul li {
display: inline-block;
padding: 10px;
margin-top: 5px;
}
If you use the "float:" in the "li", the list will invert the sequency.
You could do:
li {
float: left;
display: inline;
}
If you want to maintain it's block characteristics but still need side-by-side, you could do:
li {
float: left;
display: inline-block;
}
you will try this styling
li{
height:20px;
float:left;
list-style-type: none;
width:70px;
padding:3px;
border-right:1px solid #3687AF;
background-color: #015287;
background-repeat: no-repeat;
background-position: center 30px;
}
it will work for u sure...
ul {display: inline;}
ul li { list-style: none;display: inline;}
you can use float: left;
ul li {
float: left;
}
Related
I do not want the navigation menu to be left-aligned but centered with space over the entire width. How do I do that? I use "Blogger".
Thank you for your answers!
Best regards,
Tini
Go to Theme > Customize > Advanced > Add CSS
Add this css code :
#PageList1 ul {
text-align: center;
}
#PageList1 ul li {
float: none;
display: inline-block;
margin-left: -4px;
}
.tabs-inner .widget li a {
border: 0;
}
Then Press Apply to Blog
Here is the code : http://jsfiddle.net/o3omng/hrh1s7ss/
When I use float : left to li tags,
li tags go out of div whose class is na_cate.
Please Maintain li tags in center of na_cate,
and make those li tags left aligned.
Set text-align: center; to div.na_cate ul and display: inline-block; to div.na_cate ul li
TRY - DEMO
You could do this:
.na_cate ul {
list-style: none ;
text-align: center;
}
.na_cate ul li {
display: inline-block;
}
You need to clear the float of your container.
.na_cate li {
float:left;
margin-left:20px;
}
.na_cate ul {
list-style:none;
overflow:hidden; /* clearfix */
}
Alternatively, here is another clearfix that doesn't use overflow but pseudo elements instead.
My problem is that I've got a div at the top of my site that has a dropdown menu with a float to the left, the thing is that under that div where I want to have a header whenever I hover over the menu the header floats to the left as well.
I tried to do a clear div after the top div then on css use clear:both; but it didn't really help
Here's the JSfiddle:
http://jsfiddle.net/Safushi/XRNP5/
ul {
font-size: 16px;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
background: #464646;
white-space: nowrap;
}
ul li a:hover {
background: #565656;
}
is some of the code for the menu (had to paste some code to be able to paste JSfiddle link).
It will be fixed by adding a
position: absolute;
to the ul that contains the submenu.
The child ul element needs to be absolutely positioned if you don't want it to effect the other elements.
Example Here
#top li > ul {
position:absolute;
width:100%;
}
And as Adrift mentions, you may also want to give the ul a width of 100%.
You got the layer of HTML file right,but the property "position" wrong.
Demo
Once a tag's settled position:absolute; ,it will only be positioned referring to its containing block.So you need to set #menu{postion:relative;} to let its parent-tag be the containing block.In fact,now the submenu is totally deleted from the normal flow,so it won't affect the styles of other tags.
Moreover,I highly recommend you to resist to use descendant selectors,which not only let your browser slower,and your code maintenance much more complex as well.
So for my Tafe work, one requirment is to have an unordered list.
I have a menu, but it clashes with the list I'm attempting to make.
Here's the fiddle: http://jsfiddle.net/tHLY7/1/
If you remove:
li {
display: inline;
}
It shows the list how I want but ruins my menu.
Any idea?
You need to tell the display:inline to be on the nav only.
#Menubar ul li { display: inline; }
your styling li { display: inline } will apply to ALL <li> on the page, no matter where they are. I would suggest targeting only the <li> that are part of your menu. In your case,
#menu li { display: inline; }.
Or maybe,
#Menubar li { display: inline }.
(one word of note though, ID's and classes in HTML are by convention, all lowercase, so you should change <div id="Menubar"> to <div id="menubar">.
I've made some improvement overall: http://jsfiddle.net/oneeezy/tHLY7/4/
Here are a few tips
1.) You should never use "#ID" for styling purposes, just use #ID for javascript hooks, always use ".class" for styling and like someone else said, keep it lowercase.
2.) Always use a "reset.css" file. I've attached the best reset file I know that exists from HTML5 boilerplates website. You can take care of a lot of your "base" styles in that file. Use a stylesheet.css file after your reset.css file
3.) Like someone else said, if you have multiple elements on a page (in this case, ul's) then you must target that specific ul through a class name and tell it specifically what you want it to do.. otherwise it will take the style from the reset.css file.
4.) 2 very important styles have been added!
Clear Fix (I'm calling this ".row", This is the best way to make things drop to the next line (like hitting the "return" key in microsoft word)
Box sizing is you're best friend! It makes "padding" act correctly and doesn't add space to your elements that have it. I gave it the "*" to apply on everything.
/* Box sizing is you're best friend! It makes "padding" act correctly and doesn't add space to your elements that have it. */
*, *:after, *:before { margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/* Clear Fix - This is the best way to make things drop to the next line (like hitting the "return" key in microsoft word ) */
.row:before, .row:after { content: " "; display: table; }
.row:after { clear: both; }
.row { *zoom: 1; clear: both; }
/* This "wrapper" goes around everything and makes your content stay in the middle of the page */
.wrapper { width: 90%; margin: 0 auto; }
/* Navigation */
.menu { background: #000; width: 100%; float: left; display: block; }
.menu ul { color: #fff; float: right; }
.menu ul li { float: left; display: block; }
.menu ul li a { display: block; color: #fff; padding: .25em 1em; border-left: 1px solid #fff; }
.menu ul li a.active { background: #333333; display: block; color: #fff; padding: .25em 1em; border-left: 1px solid #fff; }
.menu ul li a:hover { background: #333333; color: #fff; }
/* Main Content */
.main { padding: .5em 0; }
.main h1 { margin: .5em 0; }
.main ul { }
.main ul li { list-style: inside; }
I hope this helps!
I Have a List which isn't diplaying like a list, I want every <li> to be under the other, just like a standard list.
Here is an example fiddle:
http://jsfiddle.net/w5tZ3/
#settingNev li {
display: block;
margin: 0;
padding: 0;
clear:both;
}
add clear both to show as list
If you don't want the list in horizontal way, please don't use float:left;
Clearing floats is your Answer Use clear:both; Or overflow:hidden
#settingNev li {
overflow:hidden /*Add this to the make li in flow*/
display: block;
margin: 0;
padding: 0;
}
For more Detail Refer This
Remove float: left; from a and span styles
I added the following patch to your CSS.
#settingNev ul {
display:table !important;
}
#settingNev ul li {
display:table-row !important;
}
Here is the entire code mate:
http://jsfiddle.net/w5tZ3/9/