2

ExtJs に、ユーザー名を含む div を持つタイトル バーがあります。'float: right;' でできるように、タイトル バーの右側に表示させたい。しかし、FFではテキストを1行下にドロップしますが、Chromeでは問題ありませんか?

HTML:

<span unselectable="on" class="x-panel-header-text x-panel-header-text-default" id="programList_header_hd-textEl">Program Access permissions (TestResetValidity)<div class="programusername">Test Reset Validity</div></span>

CSS:

.programusername {
    position: relative;
    float: right;
    margin-right: 70px;
}

ここに画像の説明を入力

クロムだけでなく、すべてのブラウザーでこのように並べるにはどうすればよいですか (以下)。

ここに画像の説明を入力

4

3 に答える 3

3

まず、 のようdivなインライン要素の中に のようなブロック要素を入れないでspanください。

適切なテキストを別の div に入れて後で配置するdiv#programusernameと、修正されます。

また、位置を相対的に変更する必要はありません。

最後に、<div style="clear: both;">float で並べる要素の後に a を配置して、他のページ要素が移動しないようにします。

于 2013-03-15T16:05:17.603 に答える
2

Try adding overflow: hidden; to the parent <span>

于 2013-03-15T15:59:44.640 に答える
1

Try this:

.programusername {
    position: relative;
    float: right;
    margin-right: 70px;
    display: inline-block;
}
于 2013-03-15T15:59:37.470 に答える