web-dev-qa-db-ja.com

Railsのsimple_formのCSSで2つのdivを同じ行に置く方法は？

同じ行に2つの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のみを使用して問題を解決します。

htmlcssruby-on-railserbsimple-form
7
user938363

あなたの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;
}
25
ap.singh

浮かない またはの幅を設定します インライン要素。削除する display: inline;両方のクラスとマークアップから問題なく表示されます。

編集：幅を設定できますが、要素がブロックとしてレンダリングされます。

3
Alexander Christiansson

なぜ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>

フレックスベースの割合で自由にプレイして、よりカスタマイズされたスペースを獲得してください。

1
a. mahdo