如何使整行浮动 link 可点击？

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>9</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span>New York</span>
      <span>9</span>
    </a>
  </li>
  <li>
    <span>New York</span>
    <span>9</span>
  </li>
  <li>
    <span>New York</span>
    <span>9</span>
  </li>
</ul>

为什么浮动元素没有下划线？

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

Answer 1

我认为您只需将 display: block; 添加到定位标记即可使整行都可以点击。我不确定为什么浮动元素会删除下划线。

Answer 2

<ul class="whole-row-link">
   <li>
      <a href="#"></a>
         <span>New York</span>
         <span>9</span>

   </li>
   <li>
      <a href="#"></a>
         <span>New York</span>
         <span>9</span>

   </li>
</ul>

ul.whole-row-link li {
  position: relative;
}
ul.whole-row-link li a {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0
}

Answer 3

我能够使 link 之间的 space 可点击，但如果没有下划线，它仍然看起来很奇怪。

我用flexbox实现了可点击的效果

`http://codepen.io/Ebeldev/pen/BKVMwP`

Answer 4

为什么浮动元素没有下划线？

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。

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

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

您可以将<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>9</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span>New York</span>
      <span>9</span>
    </a>
  </li>
  <li>
    <span>New York</span>
    <span>9</span>
  </li>
  <li>
    <span>New York</span>
    <span>9</span>
  </li>
</ul>

如何使整行浮动 link 可点击？

How can I make floated link clickable for whole row?

html

css

css-float