html - 不适用于 和

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>

我需要 span 线最多占 li 的 30%，同时最后一个 li(电话)不与地址的 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>