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 :)
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 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.
I want to break line <br/> inside a <li>
Like:
First line
second line
Second li
third li
but when doing so (both labels)- I get a space between them.
margin and padding is 0 but still I get it..
any idea how to get rid of it?
Thanks!
This is a simple solution...
by adding a <br/><br/> in your <li> will add a blank line break directly underneath
<ul>
<li>Line 1<br/><br/></li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4<br/><br/></li>
<li>Line 5</li>
</ul>
You can alter the line-height property in your css. Does that help ?
For future people who end up on this question like me:
adding white-space: pre-wrap; to the <ul> worked for me! It also works with \n as an added bonus :)
ul {
white-space: pre-wrap;
}
As a side note for Wordpress, and <br /> will be automatically removed if present before the closing </li>.
In a hacky way, you can use a zero-width non-joiner () or an invisible separator ().
In text mode, do a carriage return and insert a before the closing </li>.
Example:
<ul>
<li>List item with a blank line below
</li>
<li>List item</li>
</ul>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Coffee
- black hot drink
Milk
- white cold drink
hope This may Help..
Try This
<ul>
<li>First Line</br>First Second Line</li>
<li>Second Line</li>
</ul>
Check This
Try using
li{
float: none;
}
An improvement on Rudrik's Answer:
<UL>
<LI>First Line
<DD>Second Line</DD> <!-- No Space -->
</LI>
<LI>Third Line</LI>
<LI>Fourth Line</LI>
</UL>
Word!
Try playing around with "line-height".
Might this work for you?
<ul>
<li><div>First line</div> second line</li>
<li>Second li</li>
<li>third li</li>
</ul>
Using inline CSS, create a division with a fixed height, but no content, to create an empty line between list items, just like using nested lists. If you don't know much about CSS, just copy this solution and edit the height (in pixels) to change the empty line height. Place an empty line with this code anywhere in the lists, and set whatever height you desire for each empty line created.:
<ul>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4
<div style="height: 10px;">
</div>
</li>
<li>Line 5</li>
</ul>
Try this;
/* CSS */
#keyskills:after {
content:"I.T. – data analytical, planning, design and interaction skills \A Data logging and reporting - averaging about 60 WPM \A Research skills, able to provide intermediate I.T. support ";
white-space: pre;
}
/* Body of HTML */
<p id="keyskills">
Try using flex as well as flex-direction. It worked for me.
Add a paragraph with the line break:
<li>
<p>...</br></p>
</li>
Maybe this would be helpfull
ul {
list-style-position: outside;
}
To make lists horizontal and hide default bullets, is it necessary to give {display:inline} and {float:left} both to the <li> tags or anyone of these alone is enough?
<ul>
<li>First item</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>Last item</li>
</ul>
How to make cross browser (including IE6 and FF2) , pixel perfect horizontal list without bullet in best way?
What is best and short method?
ul {}
li {}
a {}
No, either one alone is enough. You could even use inline-block if you like, although it doesn't have very good support in FF2. Hiding bullets is done with list-style:none;
You could setup a simple test quickly to check these:
#one, #two, #three { list-style:none }
#one li { float:left }
#two li { display:inline }
#three li { display:inline-block }
<ul id="one">
<li>Float left</li>
<li>In this example</li>
</ul>
<div style="clear:both"></div>
<ul id="two">
<li>Display inline</li>
<li>In this example</li>
</ul>
<div style="clear:both"></div>
<ul id="three">
<li>Inline-block</li>
<li>In this example</li>
</ul>
See how they render: http://jsbin.com/opiqu3/
display:inline is not necessary but float:left is necessary to make it horizontal and like you said about hiding default bullets, then even list-style:none is also necessary.