将登录表单放在页面的右侧 [英] Put login form to the right of the page

问题描述

以下是我的 jsFiddle 。尽管我应用此规则

  #login {
 float：right; 
} 
  

表单将保留在排行榜链接旁边。在移动设备上，这不是一个问题，因为一切都将显示在一个列的fahsion，但在桌面我想标志在最左边的位置，文本框和排行榜在某处在中心和登录

---

注意，实际的标志一切都很好（关于标志），所以忽略链接标志在例子中的丑陋效果。

解决方案

显示flex应用于父元素（ ui-block-solo ）。最好不要同时使用显示灵活，浮动对齐和绝对位置。

如果您选择保留display flex，则可以使用flex对齐 - 您可以在这里阅读更多 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 。

如果有浮点对齐和绝对位置，将应用绝对位置。此外，如果您喜欢浮动对齐或绝对位置，您应该使用移动设备的媒体查询。

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.

解决方案

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.

这篇关于将登录表单放在页面的右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！