0 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#container{
    background:#0033FF;
    float:left;
    width:150px;
}
#text{
background:#00FF00;
width:150px;
float:left;
}
#tooltip{
position:relative;
right:-100%;
background:#FF0000;
display:inline-block;
float:left;
}
-->
</style>
</head>

<body>

<div id="container">
    <div id="text">Here is some text</div>
<div id="tooltip">tip</div>
</div>
</body>
</html>

我试图用上面的代码做的是有一个容器 div，然后是一个带有文本的 div，然后是一个带有工具提示的 div。我将工具提示定位为相对位置和右：-100%，以便无论文本和容器的宽度如何，它都应该直接显示在文本的右侧。这种工作，但是工具提示现在出于某种原因转到了新行。

我的问题是这个。为什么在上面的代码中 id tooltip 的 div 在一个新行上？我真正想要的是它在同一条线上。

4

1 回答 1

0 
#container{
background:#0033FF;
float:left;
width:150px;
position:relative;
}
#text{
background:#00FF00;
width:150px;
float:left;
word-wrap:break-word;
}
#tooltip{
right:0px;
top:0px;
position:absolute;
background:#FF0000;
display:inline-block;
float:left;
}

您可以使容器的位置相对。并且 Tooltip 被定位为绝对。工作小提琴

于 2013-01-06T04:51:01.943 回答