How to Clear float for ul

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

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>

Answer 3

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 4

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

Answer 5

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.