I have a series of LI inside a UL like this:
<ul>
<li class="section left"></li>
<li>I want to float this on the left</li>
<li>I want to float this on the left</li>
<li>I want to float this on the left</li>
<li class="section right"></li>
<li>I want to float this on the right</li>
<li>I want to float this on the right</li>
<li>I want to float this on the right</li>
</ul>
This HTML is generated by php and I cannot alter the HTML, on the other hand I have the ability to assign classes to individual LI elements. The UL and LIs will contain form elements, which I want to distribute in two sections, floating some contents (some LIs) on the left and some content (other LIs) on the right.
If I could nest ULs within the main UL this would be much easier, treating inner ULs as blocks, but I can't do that here.
How to accomplish the same result with CSS given the HTML constraints mentioned above? I mean yeah I could assign floating classes individually to each LI but I was hoping to a more elegant solution here.
thank you
Add the following CSS3 code:
ul{width:100%;list-style:none;}
/* the '~' (general sibling combinator)
* selector will select all following siblings in the document tree.
* This selector is part of the CSS3 selector recommendation,
* see also http://www.w3.org/TR/selectors/#general-sibling-combinators
*
*/
li.section.left, li.section.left ~ li{
background-color:#faa;
float:left;
margin-right:1em;
}
li.secton.right , li.section.right ~ li{
background-color:#afa;
float:right ;
margin-left:1em;
margin-right:0;
}
Use this with your proposed code and you'll get what you need (at least in decent browsers). JSFiddle Demo / Demo with small font size (to see effect)
Update: IE7+ compatible version (simply without :not)
Not sure how exactly you want the list to look... But, if you can assign a right class to the list items, you can set the CSS along the lines shown below to position them:
<html>
<head>
<style>
li {width:300px; list-style-position:inside;}
li.right {background:pink; text-align:right; direction:rtl;}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class="right">Item 3 -- right</li>
<li>Item 4</li>
<li class="right">Item 5 -- right</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</body>
</html>
Hm, bit hard.
Is the amount of elements fixed?
If so, first thing that comes to thought is using the adjacent sibling selector (+).
li.section.left,
li.section.left + li,
li.section.left + li + li,
li.section.left + li + li + li {
float: left
}
Same for the float-right elements ...
Otherwise, I would try and use jquery to get to the elements and assign classes to them.
I think the best solution to this, is creating the list that you have like this:
<div>
<ul>
<li>I want to float this on the left</li>
<li>I want to float this on the right</li>
<li>I want to float this on the left</li>
<li>I want to float this on the right</li>
<li>I want to float this on the left</li>
<li>I want to float this on the right</li>
</ul>
</div>
Then in the CSS you give all LI a float left and style them.(I mean width, height and so on)
After that build a little div around it and give it a max with you want you form to be (be sure the LI fit within it in rows of 2.)
This could be a solution but i don't know how much of the HTML you can alter.
Related
This is pretty straightforward.
I have the following HTML structure:
<ul id="myContactList">
<li>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
...
</ul>
and the trouble maker CSS:
ul#myContactList>li>ul>li {
float:left; /* Trouble maker */
}
Here's the JSFiddle.
Why isn't the last ul#myContactList>li being targeted by li:nth-child(odd)?
Thanks in advance, cheers! :)
It is targeting it, but you have an issue with the floats not being cleared in the last list item. See http://jsfiddle.net/ekXjy/4/ (specifically line 20 of the CSS, which causes a new float context for each list item).
ul#myContactList>li>ul {
list-style-type:none;
padding:0;
overflow: hidden; /* New style, to clear the floats contained within */
}
The clear:both you had for ul#myContactList>li>ul clears the floats for the list items preceding the last one, but nothing cleared the floats in the last item. Using overflow:hidden to give each list item its own block context fixes that.
Is there a difference beetwen #1 and #2? I'm thinking about cross browser compatibility and accessibility. Should I prefer one approach to the other or it doesn't make a difference?
Any link to articles on the subject is welcome.
<div class="tags">
<ul>
<li>tag 1</li>
<li>tag 2</li>
<li>tag 3</li>
</ul>
</div>
<ul class="tags">
<li>tag 1</li>
<li>tag 2</li>
<li>tag 3</li>
</ul>
A div is an empty (semantically meaningless) element until you give it styles and content. Since both divs and uls are both block-level elements by default, it seems like it's just adding extra code to use a wrapping div. Unless you are trying to do something like, say, style the area around the ul, where you may want a wrapping div with its own styles applied. Is there any particular purpose you have in mind that we may see?
In cases where I want to put different content in the container, like with AJAX insertings, I prefer option 1. Since both div and ul are block-level elements, adding an extra div container is overkill, unless you want to style the div (i.e. padding)
I have a list:
<ul>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
...
</ul>
All the <li> are floating. I need the height of the <ul> box. If I remember correctly this is not valid:
<ul>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
...
<hr class="clear" />
</ul>
.clear {
clear: both;
}
How can I do this? The number of items in the list can be different so I can't use fixed height.
Good options to contain the floats:
Add overflow: hidden to the ul.
Use clearfix.
This isn't a direct answer to your question, but as an alternative could you consider using display:inline-block? These days I just use that instead of float where possible, as essentially most of the time it can achieve the same sort of objective without the total hassle of making containers properly contain inner floating elements and having to clear them all the time.
test it:
ul { overflow: hidden; }
li { float:right; display:block; }
add class to your elements, don't do this for all elements.
Here, i am presenting, one of the easiest way to handle this kind of situations.
Float left always have some reaction and not good to use if we have some alternative of it.
The Alternative is :
li { display:inline-block; }
No need to add extra code like float:left and overflow:hidden :)
Can I make bulleted lists on my site that use <ul> and <li> tags have a different indentation distances?
Element One
Element Two
and even this line
which is not in an <li> tag are indented
List elements without the <ul> tags are
not indented
I would like to indent some elements, but the default distance is too much and the sans-indent is too little.
<ul style="padding-left:20px">
<li>Element 1</li>
<li>Element 2</li>
</ul>
I think the default indentation is 40px, this halves it.
li {
margin-left: 10px;
}
ul li{
margin-left: 20px;
}
A slightly cleaner way to adjust both of the indentations. Margin and padding differ, so use whichever suits you best.
I have a really simple set up:
<div class="container">
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
</div>
I had assumed that all contents and the bullets of the UL would be within the div, but currently this is not the case.
The bullet points for the UL appear outside of the div and effectively disappear when overflow is hidden.
To me this is somewhat broken and cross browser compatible, and I've scanned the HTML spec but couldn't find anything saying this should happen.
Is there a CSS fix for it or other layout fix?
You'll want to use list-style-position:
ul {
list-style-position: inside;
}
list-style-position: inside works great unless your bullet points will need multiple lines on small screens as your text will align with the bullet point rather than where the text begins.
Keeping the default text-align: outside, allowing for a small margin and aligning the text to the left to override any centered containers gets around the bullet point alignment problem.
ul, ol {
margin-left: 0.75em;
text-align: left;
}
You usually lose the list decorations to the overflow of a div when your UL/OL and LI don't have enough padding, or you are floating elements or display: inline.
Try adding some padding/margins to your list items (LI element).
Are you floating your List items to the left or right? If so then the following will solve your problem.
<div class="container">
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
<div style="clear:both;"></div>
</div>
For some cases, using two divs can help.
<div class="container">
<div style="margin: 3%">
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
</div>
</div>
This kind of problems can usually be fixed using a good reset.css and re-writing all the information such as list-style and so on.
if using float property on list make sure you only add the style the the selected list and not all list elements on the page.