将登录表单放在页面右侧

Posted 2023-05-09

【中文标题】将登录表单放在页面右侧

【英文标题】：Put login form to the right of the page

【发布时间】：2015-12-05 04:43:20

【问题描述】：

这是我的jsFiddle。尽管我正在应用这条规则

#login 
    float: right;

表单将保留在排行榜链接旁边。在移动设备中，这不是问题，因为所有内容都将显示在单列样式中，但在桌面上，我希望徽标位于最左侧，文本框和排行榜位于中心某处，登录到最右边的位置。

我错过了什么？

---

请注意，使用实际徽标一切都很好（关于徽标），因此请忽略示例中链接徽标的丑陋效果。

【问题讨论】：

你在使用 jquery-mobile 吗？

是的@Zl3n，你也可以在例子中看到。

确实很奇怪。

@Zl3n 是的，这就是我发帖的原因。也许 jquery-mobile 有一些东西让事情变得复杂。即使!important 关键字也无济于事。 ://

这对你有用吗？ - jsfiddle.net/gsamaras/h7gxpqn0/42

【参考方案1】：

显示 flex 应用于父元素 (ui-block-solo)。最好不要同时使用 display flex、float 对齐和 position absolute。

如果您选择保持显示 flex，您可以使用 flex 对齐 - 您可以在此处阅读更多信息 https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

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

【参考方案2】：

您在父 div .ui-block-solo 中使用 display: flex。浮动对弹性项目没有影响。

【讨论】：

只需要去掉 display: flex 属性即可。

我试过这个，但是东西从标题层溢出。

这是因为您在非浮动父级中浮动元素。看到这个线程：***.com/questions/218760/…

【参考方案3】：

尝试使用 Bootstrap 的网格系统来定位您的元素。 http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

例如，你可以有这样的东西： http://www.codeply.com/go/UVfJSRytc2

仅供参考，Bootstrap 的网格系统非常易于使用，它可以为您节省大量使用纯 CSS 的时间。使用网格，您实际上将屏幕拆分为行和列，您可以轻松地将元素放置在您想要的任何位置。我建议你看看它以供将来参考:)

【讨论】：

您能否展示如何在我的具体问题中应用链接中的说明？