<br> 不配合 <ul><li> 和<span>的</span>

Question

我有以下代碼：

<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>

我需要跨度最多為li的30％，並且同時最后一個li（電話）不要與Address的li重疊。

我已經並排放置了三個需要顯示的col-md-4框。

謝謝！

Answer 1

問題是

• 絕對定位會將元素從正常流中移除，因此可能存在重疊。
• span元素默認為inline ，因此width屬性不適用。 改為將它們inline-block 。

.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

由於您已經清除了li上的浮點數，因此您也可能會跨度浮點數。

  .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>