Question

很抱歉，如果每个人都已经反复看过这个，我相信我以前做过但不记得或找不到！

我有一个包含一系列span标签的父div标签，用于将一系列元素相互对齐 - 澄清一下，'in in'是关键的，这只是一行，多个连续行是一个要求。使用position：relative或block level elements强制它进入一个新行，这不是任何用途。例如：

<!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上设置溢出，只隐藏了除了span的第一行以外的所有内容。我已经尝试在各种各样的地方设置要清除的元素，但没有任何可见效果。

有人可以告诉我我缺少什么吗？感谢。

Answer 1

尝试：

<div style="overflow: hidden; background-color: Fuchsia;">
    <div style="float: left; margin-left: 10px;">Hello world,/div>
    <div style="float: left; margin-left: 10px;">
        <input type="text" id="Test"/>
    </div>
    <div style="float: left; 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.
    </div>
</div>

根据需要更改边距和宽度

Answer 2

这个怎么样？

<!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>

Answer 3

由于石灰框为position: absolute，因此在执行布局时会完全忽略它。因此，紫红色盒子的大小就像石灰盒不存在一样。

您需要将紫红色框更改为position: relative以包含在布局逻辑中，并添加display: block以强制其宽度。（虽然最好将其更改为<div>，已经是display: block）

Answer 4

你的“Lime”SPAN绝对定位，因此它被取出页面流。

尝试使用float：left;代替。

Answer 5

尝试更改SPAN以显示为块元素并将其相对于容器定位。这是跨度的绝对定位，导致它从渲染顺序中移除并使容器不会在其周围调整大小。

<!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="margin-top: 2px; margin-left: 350px; width:250px; 
                     background-color:Lime; display: block;"> 
          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>

哦，顺便说一句，我希望你一旦得到它就可以用样式表和类来做到这一点。此外，您可能需要给它一个负的上边距，以便相对于容器的顶部向上移动。

Answer 6

我认为你需要的是将“显示：内联”的fuchsia div包裹在内部内容中。 ¿不是吗？

调整div以适应子跨度

6 个答案: