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

时间:2013-01-01 20:13:01

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

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

3 个答案:

答案 0 :(得分:25)

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

答案 1 :(得分:3)

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

编辑:您可以设置宽度,但这会导致元素呈现为块。

答案 2 :(得分:1)

为什么不使用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百分比来获得更多自定义空间。