<br> not working with <ul> <li> and <span>'s

Question

I have the following code:

<style>
    .Dados h4 { text-transform: uppercase; }
    .Dados ul { margin-left: 0; }
    .Dados ul li { clear: both; }
    .Dados ul li span:nth-child(1) { position: relative; width: 30%; }
    .Dados ul li span:nth-child(2) { position: absolute; width: 70%; left: 30%; }
</style>

<div class="col-md-4 Dados">
    <h4>Seus dados</h4>
    <ul class="list-unstyled">
        <li><span>Name</span> <span>Test Test</span></li>
        <li><span>Email</span> <span>test@test.com</span></li>
        <li><span>Address</span> <span>44, Test Street<br />Test/TS</span></li>
        <li><span>Phone</span> <span>(999) 999 999 999</span></li>
    </ul>
</div>

I need that the span lines up to 30% of the li and at the same time that the last li (Phone) don't overlap the li of the Address.

I already have three boxes col-md-4 side by side that needs to be visible.

Thank you!

Answer 1

The problems are

• Absolute positioning removes the element from the normal flow, so there may be overlaps.
• span elements are inline by default, therefore the width property does not apply. Make them inline-block instead.

.Dados > ul > li > span {
  display: inline-block;
  vertical-align: top;
}
.Dados > ul > li > span:nth-child(1) {
  width: 30%;
}

 .Dados > h4 { text-transform: uppercase; } .Dados > ul { margin-left: 0; } .Dados > ul > li > span { display: inline-block; vertical-align: top; } .Dados > ul > li > span:nth-child(1) { width: 30%; } 

 <div class="col-md-4 Dados"> <h4>Seus dados</h4> <ul class="list-unstyled"> <li><span>Name</span> <span>Test Test</span></li> <li><span>Email</span> <span>test@test.com</span></li> <li><span>Address</span> <span>44, Test Street<br />Test/TS</span></li> <li><span>Phone</span> <span>(999) 999 999 999</span></li> </ul> </div> 

Answer 2

Since you are already clearing floats on the li , you might as well float the spans too.

  .Dados h4 { text-transform: uppercase; } .Dados ul { margin-left: 0; } .Dados ul li { clear: both; list-style-type: none; } .Dados ul li span { float: left; } .Dados ul li span:nth-child(1) { width: 30%; } .Dados ul li span:nth-child(2) { width: 70%; } 

 <div class="col-md-4 Dados"> <h4>Seus dados</h4> <ul class="list-unstyled"> <li><span>Name</span> <span>Test Test</span> </li> <li><span>Email</span> <span>test@test.com</span> </li> <li><span>Address</span> <span>44, Test Street<br />Test/TS</span> </li> <li><span>Phone</span> <span>(999) 999 999 999</span> </li> </ul> </div>