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

Putting two divs on the same line is an old question. But I can't find a solution when working with simple_form in rails. What I want to do is to display content and its label on the same line. The width of the label is 125px (.left) and the content is on the right (.right). The text in the label is aligned to the right and the text in content is aligned to the left.

将两个div放在同一行上是一个老问题。但是在rails中使用simple_form时我找不到解决方案。我想要做的是在同一行显示内容及其标签。标签的宽度为125px（.left），内容位于右侧（.right）。标签中的文本与右侧对齐，内容中的文本与左侧对齐。

Here is the HTML:

这是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">

Here is the CSS:

这是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;
}

However, in the result, there is a linebreak, like so:

但是，在结果中，有一个换行符，如下所示：

Proj Name：
must have a name

The erb code of the simple form is:

简单形式的erb代码是：

<div class="left">Proj Name：</div><div class="right"><%= @project.name %></div>

I don't want to use a table but CSS only to solve the issue.

我不想使用表而只使用CSS来解决问题。

2 个解决方案

#1

Your css is fine, but I think it's not applying on divs. Just write simple class name and then try. You can check it at Jsfiddle.

你的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

You can't float ~~or set the width of~~ an inline element. Remove display: inline; from both classes and your markup should present fine.

您不能浮动或设置内联元素的宽度。删除显示：内联;来自两个班级和你的标记应该很好。

EDIT: You can set the width, but it will cause the element to be rendered as a block.

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

#1