Hey guys, i need to display all 27 states from brazil in a selection div, I really need to do it using UL.. this is a projection of how they should look:
alt text http://img24.imageshack.us/img24/8726/statesf.jpg
And this is a piece of the UL: What would you suggest? can i do that using this markup?
<ul class="ufLista">
<li>
<ul>
<li>AC</li>
<li>AL</li>
<li>AM</li>
</ul>
</li>
<li>
<ul>
<li>CE</li>
<li>DF</li>
<li>ES</li>
</ul>
</li>
<li>
<ul>
<li>MT</li>
<li>MS</li>
<li>MG</li>
</ul>
</li>
</ul>
Is having those lists nested a necessity? If it was just one list like:
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>Four</li>
<li>five</li>
<li>six</li>
<li>seven</li></ul>
Then you could style it with:
ul { width: 300px; list-style: none; line-height: normal; }
li { float: left; width: 98px; border: 1px black solid; }
and get a 'grid' effect pretty easily.
Since the image is missing, I can only guess, but "grid-like" in the title suggests some kind of table layout. You can set the CSS display property to certain values which then should trigger table-like display:
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption
These values cause an element to behave like a table element (subject to restrictions described in the chapter on tables).
This is described in more detail at The CSS Table Model.
To organize data in a grid-like manner, instead of making elements behave like tables, use <table>. That's what it was invented for, and it still is the right solution.
Edit: As you need to do it with LIs: It should be no problem to present your markup in a table like manner. Give the inner <ul> a width: 100%, clear: both and overflow: auto. Give the inner <li>s float: left and either a relative or absolute width that amount to 100% of the ul.
Related
I have a simple list that displays fine in a single column. I have "text-decoration: none" set for the list items. When I add column-count: 2, the second column displays bullets. Any suggestions for a fix?
I believe you are looking for this:
list-style-type:none;
That is, as long as you don't want any bullet points on your <li>.
Example:
<style>
/* code to make <li> horizontal horizontal */
/* code to remove bullet points from all <li> inside of <ul> tags*/
ul > li { list-style-type: none; }
</style>
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
Or you may use the <table> and achieve this as well. Here is a link that may be of interest regarding tables.
https://www.w3schools.com/html/html_tables.asp
HTML
<ul>
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
<li>Item #4</li>
<li>Item #5</li>
</ul>
CSS
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
width: 20%;
}
My Problem
When I use display: inline-block; my <li> elements are acting as if they were wider than if I use float: left;. I have their width set to 20% (100% / 5) but the last <li> is forced to the next line as if the are too wide... When I use float: left; instead of display: inline-block;, the five <li> elements fit as expected (with the same width)...
jsFiddle: Inline-Block vs. Float
I want to use inline-block due to the fact I don't need to use a clearfix to make the parent <ul> expand to the height of the <li> elements... I may decide to use float if I could find the proper way to use a clearfix in this circumstance... Regardless, I would still like to know why inline-block widths are too wide... These <li> elements should fit five-wide on one line as long as the width is 20% and the content inside is not too wide...
The only question I could find that is similar to mine is this one (which didn't help me): css inline-block vs float
It's simple. If you add a background: red to your li rules you will see that there is a small gap between each li. The gap is not a margin or padding but a whitespace character (a space) which is created when the browser 'collapses' your newlines and tabs. The issue here is your inline elements respect whitespace but floated elements do not.
There are several solutions based on your requirements and how 'hacky' you want to get. You can see them here: Ignore whitespace in HTML
Personally I'd use display:table-cell for my li as it enjoys the best browser support and is the least hacky approach
ul.table {display:table; width:100%}
ul.table > li {display: table-cell; padding: 0; margin:0;}
An equally valid (but less readable) solution would be the remove the whitespace from the source like so:
<ul><li>Item #1</li><li>Item #2</li></ul>
This will work in any browser, even IE4. Some people do this with comments to hide the whitespace but I think that's an abuse of comment semantics and still looks ugly in the source anyway.
I am using the <ul><li> list tag within which I have 3 tags like sos:
<ul id="reg-lists" >
<li class="one">
<select>...</select>
</li>
<li class="two">
<select>...</select>
</li>
<li class="three">
<select>...</select>
</li>
</ul>
I have the proper css to make the list horizontal:
#the-form li {
display:inline !important;
list-style-type: none;
padding-right: 10px;
}
I does'nt seem to work though and am not sure why. Horizontal rule seems to apply well until you put the combos. Would appreciate your help. Thanks
It works fine for me -- see this JSFiddle -- the list items are displayed horizontally, at least they are when I look at it in Firefox.
If you're seeing something else in another browser, please let us know.
If this is case, the solution may be to use display:inline-block instead of display:inline.
inline-block is similar to inline, but allows the element to contain block type elements, which are not allowed by the normal display:inline style.
Hope that helps.
You need to give your <ul> a set width which is equal to the width of all the combined <li>'s and then set your <li>'s to float:left;
Here is an example:
<ul>
<li>list</li>
<li style="float:left;">list</li>
<li style="float:left;">list</li>
<li style="float:left;">list</li>
<li style="float:left;">list</li>
</ul>
How to keep list-style on the rest li elements while keeping float?
Thanks ;)
Having played a bit more, are you using IE? Also, are you specifying a DOCTYPE, to avoid quirks mode? There was some odd behaviour in IE6 with floats and list item bullets that may be being carried forward in quirks.
Looks to me like Internet Explorer clobbers the list style type when floating. Adding it back in works fine. See http://jsfiddle.net/gothick/VZC7F/5/ for your markup with some extra CSS styling that makes it work. That should be cross-browser safe, as far as I can see.
Complete example using inline styles:
<ul>
<li>list</li>
<li style="float:left; margin-left: 20px; list-style-type: square;">list</li>
<li style="float:left; margin-left: 20px; list-style-type: square;">list</li>
<li style="float:left; margin-left: 20px; list-style-type: square;">list</li>
<li style="float:left; margin-left: 20px; list-style-type: square;">list</li>
</ul>
...though of course it'll be more efficient to use a non-inline style/stylesheet as in my jsFiddle example.
My example works in IE8. It looks like the bullets might have disappeard in a more fundamental way in earlier version of IE; that article explains the behaviour and gives a way of recreating them, albeit with a bit of an annoying workaround (it basically recreates the missing bullets with a background-image.)
<ul>
<li>list</li>
<li style="float:left; clear: left;">list</li>
<li style="float:left; clear: left;">list</li>
<li style="float:left; clear: left;">list</li>
<li style="float:left; clear: left;">list</li>
</ul>
Here is a jsfiddle demo of what I could come up with. They are all floating left except the first one and maintain the squares.
<style>
ul{margin:0px;padding:0px;}
ul li{margin:0px 5px 5px 0px;padding:0px;list-style-type:none;float:left;}
</style>
<ul class="clearfix">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
The first li contains more content than the rest.
So, I have the following problem:
problem http://img830.imageshack.us/img830/240/problemc.png
But how do I move the next row down, so it looks like that:
want this http://img440.imageshack.us/img440/9750/solutionm.png
I tried using display:inline-block; instead of float:left; for the lis, which works, but I'd still rather use float:left; over inline-block.
Any ideas on how to do this?
Solution for IE:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
The best solution is to use a little-known display style called table-cell.
I've had to do this a few times. Here's how you do it:
/* -*- CSS -*- */
ul li .wrapper
{
display:table-cell;
width:100px; /*replace here*/
min-height:100px;/* " " */
}
ul li
{
float:left;
display:inline-block;
}
ul
{
display:table;
}
...
<!-- HTML -->
<ul>
<li><div class="wrapper">my-content</div></li>
<li><div class="wrapper">my-content</div></li>
<li><div class="wrapper">my-content</div></li>
<li><div class="wrapper">my-content</div></li>
</ul>
How this works:
When the parser sees that there's a UL object, it treats it like a table instead of a list. This gives you the distinct advantage that you're beginning to /act/ like you're working with tables (but you're not!)
The rule then runs against the wrapper class -- this creates a "Table cell". We don't want to put it in the li because OTHERWISE the li will act as the table cell. This is kinda bad. the work around is that your li is actually aligned left. There's some argument whether or not is a good idea to do it this way -- this is the "Most Effective" because it forces the box model to comply. Its fugly, I know.
the REASON its bad for the li to be treated like a table-cell is that it won't wrap. The reason it wont wrap is that table-cells aren't supposed to wrap.
There is ONE other solution that might work, however I haven't tested it.
/* -*- CSS -*- */
ul li { display: inline-block; float:left; min-height:200px;width:200px; }
Its not as ugly, but it should work by making the box model force the alignment as well.
First of all: Are you sure you're using the right markup? A list generally doesn't end up to look like that.
Second. Do you know how many items you will have on a row? In your image they seem to have the same width. If you know that you can add clear:both; to the forth li (and other you may need) and force it down. This would be the only way to do it with left floating lis.
You can't do this using only float:left; the blocks just fall into place where they fit as your first example shows. If you intend for your content to always display in three columns, you could programmatically clear the float on the first item in each row.