Question

我正在尝试堆叠到元素：div和span。我希望它们作为列表排序并且它很好但是当跨度中文本的长度发生变化时它也会改变它上面的div的位置

以下是一个例子：

<div style="top: 25px; left: 200px; display: block;">
...
<span id="selectedSearchedItem">This is a span that changes its text dynamically</span>

http://jsfiddle.net/W4ZNJ/

我希望带有按钮和文本框的部分始终与右边框的偏移量相同，并且文本长度的变化不会影响上面的控件。

Answer 1

将其浮动到右边并向右边添加边距

Answer 2

应用这样的风格：

style="float:right; margin-right: 5px;"

编辑：

你可以将你的div和span包装成一个，如下所示：

<ul>
    <li>    
        <div class="block-controls">

            <span id="navigation-text-matches-title" style=" width:auto;">Menu</span>

            <input id="button1" type="button" style="width: 90px; " value="Button1" />

            <input id="textbox1" type="text" style="width: 50px; left: 50px;"/>  
        </div>
    </li>
    <li>
        <span id="selectedSearchedItem">This is a span that has dynamically changing text</span>
    </li>
</ul>

Answer 3

将定位属性设置为固定。还设置overflow属性等于隐藏或滚动。

Answer 4

我相信这就是你想要的。正如Lajos Arpad所说，你添加了float / margin-right来定位按钮/文本框。我在这里添加的唯一额外的东西是div / span之间的div元素，clear属性设置为两者。

<div class="block-controls">

    <span id="navigation-text-matches-title" style=" width:auto;">Menu</span>

    <input id="button1" type="button" style="width: 90px; " value="Button1" />

    <input id="textbox1" type="text" style="width: 50px; left: 50px;"/>  
</div>
<div class="clearFloats"></div>
<span id="selectedSearchedItem">This is a span that has dynamically changing text</span>

<style>
    .block-controls
    {
        float: right;
        margin-right: 5px;
    }

    .clearFloats
    {
        clear: both;
    }
</style>

fiddle

如果你想找到一点关于如何清楚：两个作品我建议看： What does the CSS rule clear: both do?

如何修复靠近活动窗口右边框的div位置

4 个答案: