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（Phone）不会与地址的li重叠。

我已经有三个并排的col-md-4盒子，需要显示。

谢谢！

Answer 1

问题是

绝对定位会将元素从正常流中移除，因此可能存在重叠。
assign\) [a-zA-Z]+ \*元素为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%; }

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>

<br/>不使用<ul> <li>和<span>

2 个答案: