问题
Here is my jsFiddle. Despite the fact that I am applying this rule
#login {
float: right;
}
the form will stay next to Leaderboard link. In a mobile, this is not a problem, since everything will be displayed in a one column fahsion, but in a desktop I would like the logo to be to leftmost position, the textbox and Leaderboard to be somewhere in the center and the login to the rightmost position.
What am I missing?
Notice that with the actual logo everything is fine (with regards to the logo), so ignore the ugly effect the linked logo has in the example.
回答1:
Display flex is applied to parent element (ui-block-solo). It would be better not to use display flex, float alignment and position absolute at the same time.
If you choose to keep display flex, you can use flex alignment - you can read more here https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
If there is float alignment and position absolute, position absolute will be applied. Furthermore if you prefer float alignment or position absolute you should use media queries for mobile devices.
回答2:
You are using display: flex in the parent div .ui-block-solo. Float has no effect on flex items.
回答3:
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's grid system is really easy to use and it saves you a lot of time from working with plain CSS. With the grid you actually split the screen in rows and columns and you can easily place your elements anywhere you want. I suggest you take a look at it for future reference :)
来源：https://stackoverflow.com/questions/32475724/put-login-form-to-the-right-of-the-page