当前位置: 代码迷 >> HTML/CSS >> css中display设置的有关问题
  详细解决方案

css中display设置的有关问题

热度:74   发布时间:2012-09-10 22:20:12.0
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; 

修改这种行为。

可能有默认值或者容器的宽度比较小
  相关解决方案