Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

Answer 1

为什么浮动元素不加下划线？

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

请注意，文本修饰不会传播到浮动和绝对定位的后代，也不会传播到原子内联级后代（如内联块和内联表）的内容。

要解决此问题，您可以在浮动范围上设置text-decoration: inherit。

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>

Answer 2

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

Answer 3

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

   </li>
   <li>
      <a href="#"></a>
         <span>New York</span>
         <span>$489</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 4

我能够使链接之间的空间可以点击，但是当你没有下划线时它仍然看起来很奇怪。

我使用flexbox来实现可点击的效果。

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

如何使浮动链接可以整行？

4 个答案: