将两个div放在同一行上是一个老问题.但是在rails中使用simple_form时我找不到解决方案.我想要做的是在同一行显示内容及其标签.标签的宽度为125px(.left),内容位于右侧(.right).标签中的文本与右侧对齐,内容中的文本与左侧对齐.
这是HTML：
<form id="new_production" class="simple_form new_production" novalidate="novalidate" method="post" action="/projects/1/productions" accept-charset="UTF-8">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="✓" name="utf8">
<input type="hidden" value="2UQCUU+tKiKKtEiDtLLNeDrfBDoHTUmz5Sl9+JRVjALat3hFM=" name="authenticity_token">
</div>
<div class="left">Proj Name：</div>
<div class="right">must have a name</div>
<div class="input string required">
这是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代码是：
<div class="left">Proj Name：</div><div class="right"><%= @project.name %></div>
我不想使用表而只使用CSS来解决问题.
解决方法
你的CSS很好,但我认为它不适用于div.只需编写简单的类名,然后尝试.
你可以在 Jsfiddle查看.
你可以在 Jsfiddle查看.
.left {
float: left;
width: 125px;
text-align: right;
margin: 2px 10px;
display: inline;
}
.right {
float: left;
text-align: left;
margin: 2px 10px;
display: inline;
}
