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

Question

把两个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解决问题。

- user938363

---

展示的代码是可以运行的。请展示一下不可运行的代码。 - Zabba

这里的代码（http://jsfiddle.net/Vgqp9/1/）使用了“display:inline”，看起来一切正常，问题出在哪里？ - The Alpha

我的猜测是simple_form正在生成一个HTML包装器。你能展示一下浏览器生成的HTML代码吗？ - Helio Santos

你发布的新HTML代码也与你提供的CSS一起正常显示。 - Zabba

执行了rake assets:precompile并重启了rails服务器，但是出现了两行信息。这是因为simple_form和rails的原因导致无法正常工作吗？ - user938363

Answer 1

你的CSS很好，但我认为它没有应用于div。只需编写简单的类名，然后尝试一下。 你可以在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;
}

- ap.singh

Answer 2

您不能将内联元素浮动或设置其宽度。从两个类中删除 display: inline;，您的标记应该正常显示。

编辑：您可以设置宽度，但会导致该元素呈块状呈现。

- Alexander Christiansson

Answer 3

为什么不使用 flexbox？所以将它们包装到另一个 div 中，就像这样。

.flexContainer { 
   
  margin: 2px 10px;
  display: flex;
} 

.left {
  flex-basis : 30%;
}

.right {
  flex-basis : 30%;
}

<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="flexContainer">
      <div class="left">Proj Name：</div>
      <div class="right">must have a name</div>
    </div>
    <div class="input string required"> </div>
 </form>

随意调整 flex-basis 百分比以获得更个性化的空间。

- a. mahdo