Как поставить два divs на одну линию с CSS в простой форме в 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;
}

тем не менее, в результате, есть linebreak, например:

Proj Name：
must have a name

код erb простой формы:

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

Я не хочу использовать таблицу, но CSS только для решения проблемы.

7
css erb html ruby-on-rails simple-form

2 ответов

ваш css в порядке, но я думаю, что он не применяется к divs. Просто напишите простое имя класса, а затем попробовать. Вы можете проверить это на 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;
}
24

вы не можете плавать или задать ширину встроенный элемент. Удалить display: inline; из обоих классов и ваша разметка должна представить штрафа.

EDIT: вы можете установить ширину, но это приведет к отображению элемента в виде блока.

3