2回答

• 

  i爱慕客

  2015-11-11 10:43:35

  已采纳

  我们经常在设计网站的导航部分的时候，如果想让导航超链接hover显示背景，但稍不注意，默认的inline会让你抓狂，因为display:inline会将超链接显示为内联元素，即没有宽和高的作用效果，这里无论你背景怎么设置，宽高都不会超出超链接的宽高范围！所以我们可以使用 block 或 inline-block 来解决此问题！

  display:block   此元素将显示为块级元素，此元素前后会带有换行符。
  display:inline-block 行内块元素。（CSS2.1 新增的值）
  

  当我们在<a>标签里添加 display:block 或 display:inline-block 时，<a>标签也就有了块元素的一些特性，此时我们设置<a>标签的宽高才会起作用，hover背景也才会有效果，不同的是，display:block 会让元素前后带上换行符，所以如果想让导航元素在一行内显示，则需要添加float属性，完整的写法如下：

  <a href="#" style="display: block; float:left;">block</a>

  而display:inline-block 则不需要float属性，因为它的本身就是行内块元素，写法如下：

  <a href="#" style="display: inline-block;">block</a>

  
  

  1 5

  慕姐4424...

  超级专业的回答 万分感谢了 谢谢啊

  2015-11-11 15:34:32

  共 1 条回复 >

• 

  echo_kinchao

  2015-11-12 07:59:38

  内联元素没有宽高   你可以设置他为 内联块级元素

  1 0

  慕姐4424...

  哦 是不是这样意思 块级元素没有高度 宽度 就是我给a设置了 高度 和宽度 a也不会显示不出来 所以 必须 让a成为一个块级元素 这样它的高度 宽度 才会显示 是吧？

  2015-11-12 08:33:29

  共 1 条回复 >