首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

css中display设置的有关问题

2012-09-10 
css中display设置的问题title无标题文档/titlestyle typetext/cssa.tooltip {position:relative

css中display设置的问题
<title>无标题文档</title>
<style type="text/css">
  a.tooltip {
  position:relative;
  }
  a.tooltip span{
  display: none;
  }
  a.tooltip:hover span {
  display:block;
position:absolute;
top:1.0em;
left:2em;
padding: 0.2em 0.6em;
border: 1px solid #996633;
background-color:#ffff66;
color:#000;
text-decoration:none;

  }
  
</style>
</head>

<body>
<p>
  <a href="fixed_absolute.jsp" class="tooltip">
  Andy Budd<span>(My web site)/span>
  </a>
  is a web developer based in Brighton England.
</p>
</body>
</html>


上面的是使用css在连接 Andy Budd 下面弹出解释内容 My web site,
当鼠标位于其上时 my web site 会分成三行显示,为什么a.tooltip:hover span中
不设置span 的width属性时会出现上面的情况??span在鼠标悬浮时已是block元素
应该在一行显示啊????


[解决办法]
你可以加上
white-space: nowrap; 

修改这种行为。

可能有默认值或者容器的宽度比较小

热点排行