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

Question

我正在尝试堆叠到元素：div 和 span。我希望它们作为列表排序，这很好，但是当 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 包装在 a 中，如下所示：

<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

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

Answer 4

我相信这就是你想要的。正如 Lajos Arpad 提到的，您添加浮动/边距右来定位按钮/文本框。我在这里添加的唯一额外内容是 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>

小提琴

如果您想了解一下 clear:both 的工作原理，我建议您查看： CSS rule clear: both do? What does the CSS rule clear: both do?