本文探讨了在Rails项目中使用SimpleForm时遇到的问题，即如何将内容和其标签在同一行显示。作者提供了HTML和CSS代码示例，但遇到了内容换行的困扰。他们希望找到不依赖表格的纯CSS解决方案，保持标签宽度固定，文本右对齐，内容在右侧，文本左对齐。这是一个关于前端布局和Rails表单定制的挑战。
将两个div放在同一行是一个老问题。 但是在Rails中使用simple_form时找不到解决方案。 我想做的是在同一行上显示内容及其标签。 标签的宽度为125px( .left )，内容在右侧( .right )。 标签中的文本右对齐，内容中的文本左对齐。
这是HTML：
Proj Name：
must have a name
这是CSS：
.simple_form div.left {
float: left;
width: 125px;
text-align: right;
margin: 2px 10px;
display: inline;
}
.simple_form div.right {
float: left;
text-align: left;
margin: 2px 10px;
display: inline;
}
但是，结果是出现了换行符，如下所示：
Proj Name：
must have a name
简单形式的erb代码为：
Proj Name：
我不想使用表，而仅使用CSS来解决问题。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
