抱歉，如果每个人都已经看过一遍又一遍，我确定我以前做过，但不记得或找不到怎么做!
我有一个包含一系列 span 标签的父 div 标签，用于将一系列元素彼此对齐 - 澄清一下，'in line' 很关键，这只是一行，多个连续行是一个要求。使用 position:relative 或 block 级元素强制它到一个新行，这是没有任何用处的。例如:
<!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>Positioning testing</title>
</head>
<body>
<div style="position: relative; padding-top: 2px; padding-bottom: 2px;
background-color: Fuchsia;">
Hello world
<span style="position:relative; left: 80px;">
<input type="text" id="Test"/>
</span>
<span style="position: absolute; top: 2px; left: 350px; width:250px;
background-color:Lime;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at
fermentum risus. Nulla facilisi. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Pellentesque mattis venenatis enim vitae
molestie. Integer in consequat metus. </span>
</div>
</body>
</html>
我保证这些颜色仅用于测试以显示内容(以及我保证的内联样式):-)
不幸的是，紫红色盒子的尺寸不适合石灰。一行很丑，当你需要依次使用其中的两行时，这是一个主要问题。
我已经尝试在父 div 上设置溢出，它只隐藏跨度的第一行以外的所有内容。我已经尝试在各种地方设置元素以清除，但没有任何可见效果。
谁能告诉我我错过了什么？谢谢。
最佳答案
这个怎么样？
<!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>Positioning testing</title>
<style type="text/css" media="screen">
#container {
position: relative;
padding-top: 2px;
padding-bottom: 2px;
background-color: Fuchsia;
float:left;
width: 100%;
}
#container > span {
float:left;
}
#greenbox {
width: 250px;
background-color:Lime;
}
</style>
</head>
<body>
<div id="container">
<span id="helloworld">Hello world</span>
<span id="inputbox">
<input type="text" id="Test"/>
</span>
<span id="greenbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at
fermentum risus. Nulla facilisi. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Pellentesque mattis venenatis enim vitae
molestie. Integer in consequat metus. </span>
</div>
</body>
</html>
关于html - 调整 div 大小以适应子跨度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2022599/