7

将两个 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：&lt;/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：&lt;/div><div class="right"><%= @project.name %></div>

我不想使用表格，但 CSS 仅用于解决问题。

4

3 回答 3

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;
}
于 2013-01-02T07:50:46.270 回答
3

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

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

于 2013-01-02T00:10:55.670 回答
1

为什么不使用弹性盒？所以像这样将它们包装到另一个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：&lt;/div>
      <div class="right">must have a name</div>
    </div>
    <div class="input string required"> </div>
 </form>

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

于 2018-12-11T10:25:18.700 回答