html - 如何使 float 链接可点击整行？

Question

CodePen 在这里:http://codepen.io/anon/pen/BKVMoY

ul {
  width: 40%;
  border: 1px solid black;
  list-style: none;
  padding: 0;
}
span:last-of-type {
  float: right;
}

<ul>
  <li>
    <a href="#">
      <span>New York</span>
      <span>$489</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span>New York</span>
      <span>$489</span>
    </a>
  </li>
  <li>
    <span>New York</span>
    <span>$489</span>
  </li>
  <li>
    <span>New York</span>
    <span>$489</span>
  </li>
</ul>

为什么 float 元素没有下划线？

如何让它在 span 之间的空间可点击？

Answer 1

为什么 float 元素没有下划线？

16.3.1 Underlining, overlining, striking, and blinking: the ' text-decoration ' property

Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

要解决这个问题，您可以设置 text-decoration: inherit在 float 跨度上。

span:last-of-type {
  float: right;
  text-decoration: inherit;
}

如何让它在跨度之间的空间可点击？

您可以设置 <a>至 display:block ，它将占据整个可用宽度。

a {
  display: block;
}

ul {
  width: 40%;
  border: 1px solid black;
  list-style: none;
  padding: 0;
}
a {
  display: block;
}
span:last-of-type {
  float: right;
  text-decoration: inherit;
}

<ul>
  <li>
    <a href="#">
      <span>New York</span>
      <span>$489</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span>New York</span>
      <span>$489</span>
    </a>
  </li>
  <li>
    <span>New York</span>
    <span>$489</span>
  </li>
  <li>
    <span>New York</span>
    <span>$489</span>
  </li>
</ul>