0

要素にスタックしようとしています: div と span.I は、それらをリストとして並べ替えたいのですが、それは問題ありませんが、スパン内のテキストの長さが変更されると、その上の 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/

ボタンとテキストボックスのある部分を常に右の境界線から同じオフセットにし、テキストの長さが変更されたときに上のコントロールに影響を与えないようにしたい.

4

4 に答える 4

0

右にフロートさせ、右にマージンを追加します

于 2013-09-26T09:05:56.263 に答える
0

私はこれがあなたが望むものだと信じています。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>

フィドル

clear:both がどのように機能するかについて少し知りたい場合 は、CSS ルール clear: both do?を参照することをお勧めします。

于 2013-09-26T12:02:54.740 に答える
0

次のようなスタイルを適用します。

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>
于 2013-09-26T09:07:58.070 に答える
0

位置プロパティを固定に設定します。また、overflow 属性を hidden または scroll に設定します。

于 2013-09-26T09:09:06.860 に答える