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.
Related
I have a horizontal list in my markup with the following CSS:
ul li {
display: inline;
list-style: circle;
list-style-type: circle;
}
When I remove the display: inline; it works fine. But I can't get it to work on the horizontal one.
The list decorators will only be displayed if you don't override the display type for the list item. Rather than setting display: inline, apply a float: left and give some margin to prevent the circles from colliding into the previous element.
ul li {
float: left;
margin-left: 30px;
list-style: circle;
list-style-type: circle;
}
Here is an example.
ul li {
float: left;
margin-left: 30px;
list-style: circle;
list-style-type: circle;
}
/* this bit is optional, it only removes the left padding from the first item */
ul li:nth-of-type(1) {
margin-left: 0;
}
<ul>
<li> item 1 </li>
<li> item 2 </li>
<li> item 3 </li>
<li> item 4 </li>
</ul>
well, if you do that it won't shw because you're basically declaring "stop displaying the element in its default display method list-item and use inline instead" . To learn more about display methods, please take a look do DISPLAY PROPERTY.
Now, if you want to have bullets AND still display it inline, there are many ways to do it. You can use a :before pseudo-selector, you can use a background, etc.
For example:
ul li {
display: inline;
}
ul li:before {
content: "• ";
}
or
ul li{
display: inline-block;
}
ul li{
padding-left:30px; background:url(images/bullet.png) no-repeat 0 50% ;
}
but as long as you "kill" the list-item display method, you'll need to find some ways to override the DOM display of list types
Instead of inline, use:
li {
float:left
}
or
li {
display:inline-block
}
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.
I am working on my navigation and it's currently in a list style. How can I make it horizontal instead?
Here is the CSS code and my site is https://centrecorp.squarespace.com/
.main-navigation {
.nav-font;
float:right;
ul {
padding-left: 0;
li a {
display: inline-block;
color:#nav-color;
ul {
display: none;
}
&:not(:last-child) {
margin-right: .5em;
}
&:hover > ul {
display: inline-block;
color:#nav-color-hover;
}
&.active-link > a {
color:#nav-color-active;
}
&.active-folder > a {
}
}
}
}
Thanks!
Here is the boilerplate CSS I find works best for these.
/* reset */
ul,li { list-style:none; margin:0; padding:0 }
/* float */
ul li { display:block; float:left; }
/* clear floats */
ul:after {display:block; clear:both; visibility: hidden; content:"."; height:0;}
We can use
li { display:inline; } or li { display:inline-block; } but I find just a straight clear as shown above the least hassle when it comes to setting look and feel.
Comming soon is box flex - will no doubt be the way we are doing them soon
If you want the list items to be displayed next to each other, style them as display: inline or display: inline-block.
By default they are block, which by default occupy 100% of their parent's (inner) width, and thus are placed underneath each other.
You can also use float: left, but floating introduces other problems as well. For instance, if the line is too long and wraps, all items have to be exactly the same height, otherwise the page will look really messed up. In general, for a toolbar, image gallery or any such (optionally wrappable) line of items, it's generally better to use display: inline-block than float: left.
So you could change li a into two layers, so you can add the display to li elements:
li
/* This is added to style the list items */
display: inline-block;
/* This is extra: hide the discs */
list-style: none;
/* This is extra extra: show a `|` inbetween the items instead. */
&:before {
content: "|";
}
&:first-child:before {
content: "";
}
/* From here, it's the existing style of the links inside the list items. */
a {
display: inline-block; /* You may no longer need this line */
color:#nav-color;
....
Check out this link:
http://www.w3schools.com/css/css_navbar.asp
li{display:inline;}
Please help,
i want to align the header menu/nav links to vertically align. See:
http://hyindia.com/demo/myoffshore/index.html
See the CODE here:
nav ul { list-style-type:none; padding:0px; margin:0px; float:left; width:100%;}
nav ul li { float:left; width:119px; height:66px;}
nav ul li a {
float:left;
width:119px;
height:66px;
font:bold 15px 'Myriad Pro';
color:#fff;
text-shadow:1px 1px #1f1f1f;
text-align:center;
}
<nav>
<ul>
<li>HOME</li>
<li>HEALTH INSURANCE</li>
<li>LIFE INSURANCE</li>
<li>OVERSEAS MORTGAGES</li>
<li>ESTATE PLANNING</li>
<li>BANKING</li>
<li>WEALTH MANAGEMENT</li>
<li>QROPS</li>
</ul>
Since some of your nav items have text spanning several rows you won't be able to use the classic line-height-trick (which would be to set the line-height equal to the height).
Instead I'd suggest changing your menu styling to use display: table/table-row/table-cell since tables are excellent at vertically aligning things in the middle.
What you need to do is to change your entire nav styling to this:
nav {
display: table;
width: 100%;
}
nav ul {
display: table-row;
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
display: table-cell;
vertical-align: middle;
}
nav ul li a {
display: block;
padding: 5px 10px;
}
Remove all the floats and widths + heights (using padding on the a instead) etc (what I have above is all you should have).
You'll also need to move the actual background styling from the as to the lis since the as won't be equal in height any more (but the lis will).
Here is five methods very well explained : http://blog.themeforest.net/tutorials/vertical-centering-with-css/
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;
}