如何在rails中使用simple_form中的CSS将两个div放在同一行？

将两个 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 http://jsfiddle.net/atinder123/h25Kb/.

.left {
  float: left;
  width: 125px;
  text-align: right;
  margin: 2px 10px;
  display: inline;
}

.right {
  float: left;
  text-align: left;
  margin: 2px 10px;
  display: inline;
}