css中display设置的有关问题
日期：2014-05-17 浏览次数：20608 次
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;
修改这种行为。
可能有默认值或者容器的宽度比较小
<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;
修改这种行为。
可能有默认值或者容器的宽度比较小
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
