Is there a best choice out of float: left or display: inline for aligning list items horizontally?
eg: http://www.vanseodesign.com/css/simple-navigation-bar-with-css-and-xhtml/
Personally I dislike float, but that maybe more of an emotional thing rather than logical.
ul { list-style-type: none; overflow: hidden; width:200px; }
ul li { float:left; width: 100px; }
ul li a { display: block; padding: 10px; width:80px; }
ul li a:hover { background: black; }
<ul>
<li>Facebook</li>
<li>Google</li>
</ul>
This is what I prefer mostly because when you use display:inline you cannot set properties like width, padding (top and bottom), margin etc... which is an handicap for layout purposes.
EDIT 2014
It is also an option to use the display: inline-block property. One think to note is that once you make the list elements inline or inline-block, white-spaces will be taken into consideration. Hence, there will be unwanted spaces between elements.
ul { list-style-type: none; width: 300px; font-size: 0; }
ul li { display: inline-block; *display: inline; zoom: 1; margin-right: 10px; }
/* The *display and zoom is a IE hack, though can't remember
now which one (guess it is IE7) */
ul li a { display: inline-block; padding: 10px; font-size: 13px; }
Check the fiddle here.
If you don't want to use the font-size property (for browser compatibility issues), you can also use html comments to get rid off whitespaces! Though I prefer the method above.
<ul><!--
--><li>Facebook</li><!--
--><li>Google</li><!--
--></ul>
What about
li {
display:inline-block
};
You can then set properties like width, heigth, padding, margin, etc..
I have noticed some rendering bugs when displaying LI's Inline in chrome. My LI border sometimes does not render with the proper horizontal padding.
In general though, I like Inline, it still gives you horizontal margining and padding and you can do a nice text-align: center; on the UL and use the UL for vertical spacing.
I tend to use float purely because an LI is a block element by default and should be treated that way in my opinion but there are clear use cases for both.
It's personal preference.
From a CSS point, Display:Inline = Float:Left(Right).
When it comes to making elements horizontal, like <li>.
The css rule Float is newer than Display.
Related
So I'm developing a web page, and I'm making it now responsive. I managed to get everything responsive except the main menu nav.
It's a ul element and it has li inside with text. Here are some pictures about the problem
Full webpage:
On mobile:
I just want to adjust the text or the ul element to fit without making another line.
Here's the css ul element:
.main-menu ul {
display: table !important;
background-color: #98B709;
padding: 0;
margin: 0;
text-align: center;
}
And the li element:
.main-menu ul li {
display: inline-block;
float: left;
position: relative;
list-style: none;
}
I tried a lot of things but nothing works...
Thanks and hope you guys can help me!
I found a very useful Stackoverflow post that should answer your question:
Responsive Font Size
And I experienced that changing font size and other problematic parts from px to em generally helps to make is more responsive too.
Try to use different font size e.g
vw Relative to 1% of the width of the viewport
vh Relative to 1% of the height of the viewport
Here is a variation that does not use display:table, which I always avoid.
The important bit you can play with is the 'width' of the 'li' element. If you really want to squash them all on one line, you can make this a very small %.
If you do use the second line, the 'text-align:center' in the 'ul' element will keep everything centered, instead of floating left as you have it now.
I use this code block all the time; it's a common problem.
#main{
width:100%;
}
#main ul {
display: block;
text-align: center;
width: 100%;
padding: 0;
margin: 0;
}
#main li {
width:10%;
list-style: none;
display: inline-block;
padding: 0;
margin: 8px;
}
I have spent like 4 hours and still cannot fix it, I have 2 divs, one floated left and one right, in left div I have text and in right I have a <*ul>, when I use text-align:center; based on media query for the left template it works perfectly, but I also want the <*ul> to be centered when the browser width is reduced. Please take a look here and let me know what I am doing wrong and where exactly ? http://goo.gl/OJ5OHt THANKS A LOT to anyone who helps me get out of this..
The problem is not so much the UL but the children LI, that are floated left.
You have two options:
A)
Set a fixed width to UL and center via margin auto:
.social-icons ul {
margin: 5px auto;
width: 220px;
}
B) Remove the float from the children LI, set them to inline and set their children A to inline-block (and then UL text-align would work):
.social-icons ul {
text-align: center;
}
.social-icons ul li {
display: inline;
float: none;
}
.social-icons ul li a {
display: inline-block;
}
The only ways I can see to do this is to add the following to your ul style under your media query:
margin: 0 auto;
width: 217px;
It needs to be a fixed width.
OR
Change your ul to:
text-align: center;
And your li and a items to:
display: inline-block;
Either way should work.
Here's my struggle. So I've been wondering how I could make the navbar-links fill out 100% of the nav. So that they have an equal amount of spacing and the font-size will decrease if more links were added - this way it will always fill out 100%.
As it is now, I cannot seem to achieve this. I've only got a set padding, but I've tried doing stuff like:
display: block;
float: left;
width: 100%;
but it's giving me all kind of effects that doesn't work at all :S
Anyone able to help me out on this?
Codepen example
Remove width from #main-navigation and add with to #main-navigation li with a value equal to the 100/the_numberof_elements_in_the list. Your css should be:
#main-navigation {
height: 54px;
overflow: hidden;
border-bottom: 1px solid black;
}
#main-navigation ul {
height: 54px;
overflow: hidden;
}
#main-navigation li {
font-size: 1.0em;
text-transform: uppercase;
list-style: none;
float: left;
width: 20%;
}
This way you'll have your nav occupying all the available width, but your font-size will not automatically resize. You'll should change it also in function of the number of elements (similar the way you have to do to the li's width). If your are generating this list dynamically at server side, you could do the same with the css and then calculate the right values for these two attributes. If your are using ajax to populate the list, you could do change the attributes with javascript.
A way of doing this is using display: table on the parent and display:table-cell on the children. I believe it won't work on some versions of IE (of course). Here's an exaple
You can use the nav tag instead and treat it as table. Treat the <ul> tag as table-row and <li> tag as table-cell. Ex:
nav{
display: table;
text-align: center;
width: 100%
}
nav ul{
display: table-row;
}
nav ul li {
display: table-cell;
}
This will stretch the contents of <li> 100%
I learnt it from the following link: http://www.darkstardesign.com/darkstar-blog/2012/11/27/stretching-horizontal-navigation-menus-to-the-full-width-of-a-layout/
I'm trying to build a horizontal menu with the last item seperated and positioned right, so that a logo finds place between the last and the second last item.
Firefox, Opera (Presto) and even the dirty ones from Redmond (9.0+) render it like I would expect. But WebKit (Chrome and Safari both render it the same) takes some space after the second last item where the last item would stay without position: absolute.
<header>Logo</header>
<nav>
<ul>
<li>Home</li>
<li>Statistics</li>
<li>Data Management</li>
<li>Market Research</li>
<li>Web & Apps</li>
<li>Contact</li>
</ul>
</nav>
I display the list as table and the list items as table-cell because I want the left part of the menu (first to second last item, left to the logo) to have a fixed width while the items take the width they need for their contents. Text could change to anything. Till there, everything is alright. But if I give the last item a display: block; position: absolute, WebKit renders that gap (white in the example).
nav ul
{
display: table;
background: white; /* that's what you see in webkit */
}
nav ul li
{
display: table-cell;
}
nav ul li:last-child
{
display: block; /* "display: none;" works like I would expect */
position: absolute;
}
Here is a Fiddle.
I'm not sure if it is a bug in WebKit, because absolute positioning an element inside a table might not be default behavior. On the other hand, display: none works like I would expect. Shouldn't the space consumption be 0 in both cases?
Does anybody know of a bug in WebKit or has anyone an idea of how to prevent that gap?
Set the penultimate element "Web & Apps" to display block instead of table-cell:
nav ul li:nth-last-child(2)
{
display: block;
}
Display block fiddle
I've pushed this answer on other people, and often got the "flexbox isn't widely supported yet" response. However, here it goes again. The reason that Webkit is misbehaving is that within its implementation of display: table, the DOM is reserving space for the semantically declared cell. The easy way to implement this would be to simply break this element out into its own object, much like you'd done with the logo.
HOWEVER...
if you want to keep these semantically grouped - And why wouldn't you, they're all content, right? - you can always use the flexbox model to overcome this.
Here's a fiddle showing its use.
Here's what we change:
nav ul
{
display: box;
display: -webkit-flex;
flex-direction: row;
-webkit-justify-content: center;
-webkit-align-items: center;
-webkit-flex-direction: row;
background: white; /* that's what you see in webkit */
empty-cells: hide;
table-layout: auto;
}
nav ul li
{
flex: 1 1 auto;
-webkit-flex: 1 1 auto;
}
Now, your items properly cover the background, as it is no longer treating the last li as if it were a true table cell and still within the bounds of the table. Flexbox provides a flexible layout to fill available space. Often people see this as a solution for the "Holy Grail of Layout" problem, but its use expands way beyond just that.
So, if another "Flexbox isn't widely supported enough" response is incoming, I understand. But I'll keep proposing it as an answer on every one of these that I come across, because support is getting better every day.
A little CSS edited, take a look at please, if this what you want, Fiddle
body
{
position: relative;
background: #bbbbbb;
text-align: center;
color: white;
}
header
{
position: absolute;
top: 10px;
left: 630px;
width: 80px;
height: 60px;
line-height: 60px;
background: black;
text-transform: uppercase;
}
nav
{
position: absolute;
top: 20px;
left: 20px;
}
nav ul,
nav li
{
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul
{
width: 200px;
}
nav ul li a
{
display: block;
padding: 1px;
background: #0099ff;
color: white;
text-decoration: none;
}
nav ul li a:hover
{
background: black;
}
nav li{
margin-bottom: 5px;
height: 25px;
line-height:25px;
}
While using absolute, every thing related/relating to that must be absolute in term of pixels.
I have updated fiddle, as your nav + logo .header + .nav:last-child were not totaling proper.
Fiddle link : http://jsfiddle.net/3TUk8/2/
in other case you will have to do that
nav ul
{
display: table;
background: #bbbbbb; /* that's what you see in webkit and same as bg color will hide it :) */
list-style: none;
}
I hope this solve your problem :)
I want my li elements that form a horizontal menu to be distributed evenly across the width of my ul element. I normally float my li elements to the left and add some margin. But how do I put the proper spacing so they extend from the left of my ul element to the right edge?
Here's an example jsfiddle of a menu not distributed across the ul.
The spacing has to be the same between each li. But the li elements may be different lengths.
Yet another approach. This is something I use when trying to span a menu evenly across the page. It is nice if you have a dynamic menu that will change depending on certain conditions (like an admin page that only shows up if you are logged in as an admin).
CSS:
nav div ul {
display: table;
width: 100%;
list-style: none;
}
nav div ul li {
display: table-cell;
text-align: center;
}
nav div ul li a {
display: block;
}
I was kinda lazy, and just copied this from my current project, so you will have to adapt it to fit your code, but it is my preferred method of creating a horizontal menu
EDIT: You can make it look like it spans better by adding this:
CSS:
nav div ul li:first-child {
text-align: left;
}
nav div ul li:last-child {
text-align: right;
}
again, untested, just typed.
You'll need to set the width of the li elements to force them to fill the space:
ul {
width: 100%;
}
li {
float: left;
width: 33%;
}
(Fiddle demo)
If you add more items to the list, you'll need to adjust the percentage width - eg with four items, the width will be 25%.
I have two answers for you.
If you want to stick with the float model:
Your ul element needs to have the overflow property set (without this property, your ul (or any element containing floated elements) is not given a height (this is expected behavior, mind you: http://www.quirksmode.org/css/clearing.html) and will therefore default to a height of 0 - the effect of this will be that if you set different background colors for your ul/li and body, the background of your ul will not seem to display).
ul {
text-align: center;
width: 300px;
overflow: auto;
}
Your li elements need to have widths set, otherwise - as floated elements - their width will be set to whatever they contain. I've used pixels, below, but you can use a percentage value too.
li {
float: left;
margin: 5px 0 5px 0;
width: 100px;
text-align: center;
}
Use the display:inline-block property for your li elements (if support for old browsers isn't a priority). IE 7 does not support this, so it's not useful if you need wide cross-browser support, but it creates the effect you want - though make sure you then delete any spaces between your </li> and <li> tags, otherwise they will be counted in the overall width and will show up as spaces between the elements.
One advantage that this method has is that you don't have to know or set the width of the container ul if you use percentage widths on your contained li elements, you still get the centering for free with the text-align property you already have. This makes your layout very responsive.
Here's markup and CSS that works the way I think you are requesting:
Markup:
<ul>
<li>banana</li><li>orange</li><li>apple</li>
</ul>
CSS:
li {
display:inline-block;
margin:5px 0 5px 0;
width:33.33%;
}
ul {
text-align: center;
}
If you'd rather keep the markup on multiple lines, then you'll have to fiddle with the left and right margins of your li elements in the CSS.
If you add li elements, you'll have to change the percentage width to match (for example, with four li elements in your markup, you'd need to change your CSS to have a width of 25% for each one).
Html:
<ul>
<li>1</li>
<li>2 <br>4</li>
<li>3</li>
</ul>
Css:
ul {
list-style: none;
font-size: 0;
text-align: justify;
}
ul:after {
content: '';
display: inline-block;
width: 100%;
}
li {
font-size: 100px;
display: inline-block;
}
codepen
I don't get your question clearly so I assumed that you might want this:
li {
border:solid 1px red;
clear:both;
display:block;
float: left;
margin: 5px;
width:100%;
}
ul {
text-align: center;
width:300px;
}