ページの右側にログインフォームを置く

これが私の jsFiddle です。私はこの規則を適用しているという事実にもかかわらず

#login {
    float: right;
}

フォームはLeaderboardリンクの隣にあります。モバイルでは、これは問題ではありません。すべてが1列に表示されますが、デスクトップではロゴを一番左に、テキストボックスとLeaderboardを中央に配置し、ログインをしてください。一番右の位置

何が足りないの?


実際のロゴでは(ロゴに関して)すべて問題ないことに注意してください。そのため、例ではリンクされたロゴが持つ醜い効果は無視してください。

4
はい@ Zl3n、あなたも例でそれを見ることができます。
追加された 著者 gsamaras,
@ Zl3nありがとうございました。はい、モバイルの画面に合わせて画面のサイズを変更すると、すべてが重なって表示されます。
追加された 著者 gsamaras,
@ Zl3nありがとうございました。はい、モバイルの画面に合わせて画面のサイズを変更すると、すべてが重なって表示されます。
追加された 著者 gsamaras,
@ Zl3nあなたが試したまた、あなたがほとんど答えたことが私に代わって考えるのを助けました、それでも私は解決策を見つけることができません。質問を支持したので、うまくいけば、これは人間を引き付けるでしょう.. :)
追加された 著者 gsamaras,
@ Zl3nあなたが試したまた、あなたがほとんど答えたことが私に代わって考えるのを助けました、それでも私は解決策を見つけることができません。質問を支持したので、うまくいけば、これは人間を引き付けるでしょう.. :)
追加された 著者 gsamaras,
@ Yogita088 ZI3nは正しいです。これは一見したところ問題を解決するでしょう、しかし例えばあなたがモバイルスクリーンに入ったときそれはヘッダの他の3つの要素と整列されないでしょう。
追加された 著者 gsamaras,
@ Yogita088 ZI3nは正しいです。これは一見したところ問題を解決するでしょう、しかし例えばあなたがモバイルスクリーンに入ったときそれはヘッダの他の3つの要素と整列されないでしょう。
追加された 著者 gsamaras,
はい@ Zl3n、あなたも例でそれを見ることができます。
追加された 著者 gsamaras,
@ Zl3nはい、それが私が投稿した理由です。たぶん、物事を複雑にするjquery-mobileからの何かがあります。 !important キーワードでも役に立ちません。 :/
追加された 著者 gsamaras,
@ Zl3nはい、それが私が投稿した理由です。たぶん、物事を複雑にするjquery-mobileからの何かがあります。 !important キーワードでも役に立ちません。 :/
追加された 著者 gsamaras,
@ Zl3nそれは何かですが、私はそれが画面の右端に沿ってすべての道を行くわけではないと思います。また、私はあなたのフィドルのどれが新しいコードなのかわかりません。たぶん、この質問への投票がここにもっと多くの人々を助けるために役立つのを助けるでしょう!
追加された 著者 gsamaras,
@ Yogita088 uコメントしたことは私のリンクと同じです。おそらくあなたは更新するのを忘れました!
追加された 著者 gsamaras,
@ Yogita088 uコメントしたことは私のリンクと同じです。おそらくあなたは更新するのを忘れました!
追加された 著者 gsamaras,
あなたはjquery-mobileを使用していますか?
追加された 著者 Zl3n,
それは実に非常に奇妙です。
追加された 著者 Zl3n,
それは実に非常に奇妙です。
追加された 著者 Zl3n,
最善の解決策は@gsamarasですが、cssは最後に変更しましたが、絶対位置は問題になります/ zlen/h7gxpqn0/45
追加された 著者 Zl3n,
最善の解決策は@gsamarasですが、cssは最後に変更しましたが、絶対位置は問題になります/ zlen/h7gxpqn0/45
追加された 著者 Zl3n,
あなたが絶対位置を選ぶならば、我々は絶対にすべてをしなければなりません...
追加された 著者 Zl3n,
@gsamarasすみません、何がうまくいかないのか分からない
追加された 著者 Zl3n,
@gsamarasすみません、何がうまくいかないのか分からない
追加された 著者 Zl3n,
あなたが絶対位置を選ぶならば、我々は絶対にすべてをしなければなりません...
追加された 著者 Zl3n,
@gsamarasおっと...ここに行く - jsfiddle.net/h7gxpqn0/44
追加された 著者 Araknid,
これでうまくいくでしょうか。 - jsfiddle.net/gsamaras/h7gxpqn0/42
追加された 著者 Araknid,
これでうまくいくでしょうか。 - jsfiddle.net/gsamaras/h7gxpqn0/42
追加された 著者 Araknid,
@gsamarasおっと...ここに行く - jsfiddle.net/h7gxpqn0/44
追加された 著者 Araknid,

6 答え

親div .ui-block-solo display:flex を使用しています。フロートはフレックスアイテムには影響しません。

1
追加された
これは、あなたが非浮動親の中に要素を浮動しているからです。このスレッドを参照してください。 stackoverflow.com/questions/218760/…
追加された 著者 ThemesCreator,
display:flexプロパティを削除するだけです。
追加された 著者 ThemesCreator,
なるほど、ありがとう。
追加された 著者 gsamaras,
私はこれを試したが、物事はヘッダの層からあふれている。
追加された 著者 gsamaras,

親div .ui-block-solo display:flex を使用しています。フロートはフレックスアイテムには影響しません。

1
追加された
これは、あなたが非浮動親の中に要素を浮動しているからです。このスレッドを参照してください。 stackoverflow.com/questions/218760/…
追加された 著者 ThemesCreator,
display:flexプロパティを削除するだけです。
追加された 著者 ThemesCreator,
なるほど、ありがとう。
追加された 著者 gsamaras,
私はこれを試したが、物事はヘッダの層からあふれている。
追加された 著者 gsamaras,

表示フレックスは親要素に適用されます( ui-block-solo )。ディスプレイのフレックス、フロートの位置合わせ、絶対位置を同時に使用しない方が良いでしょう。

ディスプレイのフレックスを維持することを選択した場合は、フレックスアラインメントを使用できます。詳細については、こちらを参照してください。 nofollow "> https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 。

フロートアライメントと絶対位置がある場合は、絶対位置が適用されます。さらに、もしあなたがフロートアラインメントや絶対位置を好むなら、あなたはモバイル機器のためにメディアクエリを使うべきです。

1
追加された

表示フレックスは親要素に適用されます( ui-block-solo )。ディスプレイのフレックス、フロートの位置合わせ、絶対位置を同時に使用しない方が良いでしょう。

ディスプレイのフレックスを維持することを選択した場合は、フレックスアラインメントを使用できます。詳細については、こちらを参照してください。 nofollow "> https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 。

フロートアライメントと絶対位置がある場合は、絶対位置が適用されます。さらに、もしあなたがフロートアラインメントや絶対位置を好むなら、あなたはモバイル機器のためにメディアクエリを使うべきです。

1
追加された

Try using the grid system of Bootstrap in order to position your elements. http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

For example you can have something like this: http://www.codeply.com/go/UVfJSRytc2

FYI Bootstrapのグリッドシステムは本当に使いやすく、普通のCSSで作業する時間を大幅に節約します。グリッドを使用すると、実際には画面を行と列に分割し、要素を好きな場所に簡単に配置できます。私はあなたが将来の参照のためにそれを見てみることをお勧めします:)

0
追加された
あなたは私の特定の問題でリンクの中の指示をどのように適用するかを示してもらえますか
追加された 著者 gsamaras,

Try using the grid system of Bootstrap in order to position your elements. http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

For example you can have something like this: http://www.codeply.com/go/UVfJSRytc2

FYI Bootstrapのグリッドシステムは本当に使いやすく、普通のCSSで作業する時間を大幅に節約します。グリッドを使用すると、実際には画面を行と列に分割し、要素を好きな場所に簡単に配置できます。私はあなたが将来の参照のためにそれを見てみることをお勧めします:)

0
追加された
あなたは私の特定の問題でリンクの中の指示をどのように適用するかを示してもらえますか
追加された 著者 gsamaras,