如何把两个div在同一行与CSS在simple_form在rails？ [英] How to put two divs on the same line with CSS in simple_form in rails?

问题描述

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

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.

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

但是，在结果中有一个换行符， p>

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

Proj Name：
must have a name

简单形式的erb代码是：

The erb code of the simple form is:

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

我不想使用表，但CSS只能解决问题。

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

推荐答案

您的CSS很好，但我认为它不适用于div。只需写简单的类名然后尝试。
您可以在 Jsfiddle 查看。

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.

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

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

这篇关于如何把两个div在同一行与CSS在simple_form在rails？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！