Question

我需要实现这样的目标：

<a style="display:block;" href="#">
  <div style="float:left;display:block;">Left</div>
  <div>
    <div style="display:block;">Right</div>
    <div style="display:block;">Right Bottom</div>
  </div>
</a>

基本上是一个有2列的按钮，右列有2行。

它在具有内联/块支持的现代浏览器中正确显示，但在IE6和IE7中，每当我将鼠标悬停在div（浮动）时，它将显示为“选择”文本图标而不是手形图标（我相信一旦浮动，块将被取消并显示为内联）。如果不使用整体图像，我有什么办法可以做到这一点吗？我需要它是文本，因为它对SEO和视网膜显示很重要。

:( :(

Answer 1

<a href="http://www.google.com/" target="_blank" style="display:block; overflow: hidden" href="#">
  <div style="float:left; width:150px;">Left</div>

  <div style="float:right; width:150px;">
    <div style="display:block;">Right</div>
    <div style="display:block;">Right Bottom</div>
  </div>

  <div style="clear: both;"></div><!-- This will clear the floats for IE -->
</a>

要避免文本光标添加此CSS -

a div{cursor: pointer;}

演示 - http://jsfiddle.net/ZhKmr/4/

锚标记内的多个float / block / div

1 个答案: