0

このように表示するのに苦労しています（下のスクリーンショット）

例

私はCSSにかなり慣れていません。カスタム CSS ファイル内の任意の場所に .item を配置できますか?

これは、現在の外観の HTML コードです。

<div class="item">Add a photo:<br>
  <%= f.file_field :image %>
  <br>
   <label for="a">Rename photo?</label>
  <input type="checkbox" id="a"></div><br>
4

2 に答える 2

1

float: right次のように、必要な要素の右側にa を追加してみてください。

HTML:

<div class="item">Add a photo:<br>
  <%= f.file_field :image %>

   <label class="to_right" for="a">Rename photo?</label>
  <input class="to_right" type="checkbox" id="a"></div><br>

CSS:

.to_right
{
    float: right;
}

ここに示すように: http://jsfiddle.net/7P7R5/

于 2013-03-12T15:52:46.690 に答える
0

個別の div html を作成します。

<div class="ItemContainer">
    <div class="ItemInput">Add a photo:<br>
        <%= f.file_field :image %>
    </div><div class="ItemCheckbox">
        <label for="a">Rename photo?</label>
        <input type="checkbox" id="a">
    </div>
</div>

そして使用display:inline-block;：

.ItemInput,.ItemCheckbox {
    display:inline-block;
    vertical-align:top;
}

.ItemCheckbox {
    margin-left:10px; /* Or whatever you want */
}

これにより、操作可能なブロック プロパティを維持しながら、div が互いにインラインになります。ファントム div でクリアする必要がなく、WYSIWYG 表示タイプであるため、フロートよりも効果的です。

jsFiddleの例をここに示します。

一番vertical-align上に表示させるだけなので、好きなように設定できます。また、この入力の複数のインスタンスが必要な場合に備えて、そのようなクラスとコンテナーもセットアップします。1つしかない場合は、コンテナなしで同じクラスを与えることができます。

編集：少し分離するために含まmargin-leftれています。.ItemCheckbox

于 2013-03-12T15:53:15.770 に答える