如何在rails中的simple_form中将两个div与CSS放在同一行？答案

【问题标题】：How to put two divs on the same line with CSS in simple_form in rails?如何在rails中的simple_form中将两个div与CSS放在同一行？
【发布时间】：2013-01-01 20:13:00
【问题描述】：

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

【问题讨论】：

显示的代码有效。向我们展示不起作用的代码。
Works here 应该是display:inline，有什么问题？
我的猜测是 simple_form 正在生成一个 html 包装器。可以展示一下浏览器生成的html代码吗？
您发布的新 HTML 代码也可以与您提供的 CSS 一起正常显示。
是否 rake assets:precomple 并重新启动 Rails 服务器。它显示两行。是不是因为 simple_form 和 rails 而不起作用？

标签： html css ruby-on-rails erb simple-form

【解决方案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;
}

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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>

随意使用弹性百分比来获得更多自定义空间。

【讨论】：