如何把两个div在同一行与CSS在simple_form在轨？(How to put two div

在同一行上把两个div是个老问题。 但是，在轨道与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只有解决了问题。

Answer 1:

你的CSS是好的，但我认为这是不适用的申报单。 只要写简单的类名，然后尝试。 你可以检查它的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;
}

Answer 2:

不能漂浮或设置一个内联元件的宽度 。 除去display: inline; 从两个类和你的标记应该出现的罚款。

编辑：可以设置宽度，但它会导致元件被呈现为一个块。

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> 

随时与柔性基础百分比发挥得更加个性化的空间。

文章来源: How to put two divs on the same line with CSS in simple_form in rails?