0

私の質問がばかげているように思われる場合は申し訳ありませんが、これに多くの時間を費やしました。右側に 1 つ、左側に 1 つの 2 つのスパンを含む div 表示ブロックがあります。

<div class="user-bar">
    <span class="username">Martin GOYOT</span>
    <span class="user-options"><input type="button" class="disconnect" value="déconnexion"/></span>
</div>

私はそれらを垂直方向に揃えるために2つのことを試みました.1つ目は、これら2つのフロートを取得することですが、問題は、それらがフロー(通常)から外れていることがはっきりとわかるため、背景をコンテナに適用すると、それらをカバーしません：

http://jsfiddle.net/M7Ffd/1/

2番目の解決策は、最初のものをフローに入れ、2番目のものをフロートとして配置しますが、その結果、それらを垂直方向に整列させる方法がわかりません:

http://jsfiddle.net/M7Ffd/2/ (ボタンに気をつけて、そう見えても本当に縦に並んでいない)

問題は、最善の解決策とは何か、そしてこれら 2 つの不正行為の少なくとも 1 つを修正する方法です。

ありがとう、そしてごめんなさい、私はCSS初心者です。

4

3 に答える 3

1

垂直方向の配置は難しい問題です。そして、フローティングは、すべての人にとって最初の解決策のようです。ゴトを避けて、使ってみませんか

position: absolute;
right: 0;

http://jsfiddle.net/M7Ffd/3/

于 2012-12-28T23:03:43.387 に答える
0

これは、あなたの望むことですか？ここをいじる

.user-bar {
padding: 0.5em;
margin: 0 1em 1em 1em;
background-color: green;
font-weight: bold;
font-size: 1.25em;
height:30px;
min-width:300px;
}
.user-options {
display: inline-block;
background-color: #CCC;
float: right;
}
.username {
float: left;
background: yellowgreen;
}

最小幅を設定して高さを指定すると、位置合わせと背景のソリューションが解決されます。

于 2012-12-28T23:19:08.603 に答える
0

問題を解決するには、2 つのフロートされた子の親要素で clearfix ハックを使用します。

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

フィドルを更新して表示しましたhttp://jsfiddle.net/M7Ffd/5/

于 2012-12-28T23:51:59.947 に答える