How to Clear float for ul - css

Question

I have a similar problem found here - Using :after to clear floating elements
and its demo solution:
http://jsfiddle.net/EyNnk/1/
However it still does not solve my situation:
What I m trying to do is to pass background of ul to li, by using float ul as well.
As a result I have no way to clear float except to add a div outside ul to clear the float. Is there a better way?
HTML
Text Before
<ul class="wrapper">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li style="background:#555">test4</li>
</ul>
Text After
Here is an updated problem:
http://jsfiddle.net/EyNnk/456/
What I m trying to get is that:
"Text Before" should be before the ul
and "Text After" should be after the ul
Thanks all for the solution, the best goes for connexo:
ul: display:table-cell for above/below
ul: display:inline-block for before/after
no need to float, so that there is no need to clear float, the less the better

Answer 1

Instead of float: left;, use display: inline-block; on your ul.wrapper.
https://jsfiddle.net/EyNnk/460/
For new lines between elements, use display: table-cell; for your ul.wrapper. Instead of making your li { float: left; }, use display: inline-block;. To avoid unwanted whitespace issues, set the parent's font-size: 0; and reset to the font-size you need on the li.
https://jsfiddle.net/EyNnk/464/

Answer 2

See Brett DeWoody's comment. In case you wish you place <ul> element inline between these texts, you could place them in its container. For example, let it sit in the span like this:
<p>Text Before</p>
<ul class="wrapper">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li style="background:#555">test4</li>
</ul>
<p>Text After</p>
CSS:
.wrapper {
list-style-type: none;
display: inline-block;
background: #888;
}
.wrapper li {
float: left;
padding: 10px;
}
.wrapper:after {
content: '';
display: block;
clear: both;
}
See fiddle: http://jsfiddle.net/EyNnk/462/

Answer 3

Remove float:left; from ul , Li
and add display:inline-block;

Answer 4

If you want the before and after text to be to the left/right of the <ul> add display:inline-block to .wrapper.
.wrapper {
list-style-type: none;
background: #888;
display:inline-block;
}
Here's a demo.
If you want the before and after text to be on the top/bottom of the <ul> adddisplay:blockto the.wrapper`.
.wrapper {
list-style-type: none;
background: #888;
display:block;
}
Here's a demo.

Answer 5

Try this
div{
background: #888;
}
.wrapper {
list-style-type: none;
background: #888;
display:inline-block;
padding:0;
margin:0;
}
.wrapper li {
float: left;
padding: 10px;
}
.wrapper:after {
content: '';
display: block;
clear: both;
}
<div>
Text Before
<ul class="wrapper">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li style="background:#555">test4</li>
</ul>
Text After
</div>