7

同じ行に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：&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 に答える