0

長い間、入力ボックスの右側にボタンを表示するのに問題がありました。一部のコンピューターでは機能しましたが、別のコンピューターでは解像度が異なると、入力ボックスの下に隠れてしまい、ユーザーはそれを見ることさえできませんでした。

私のコードは次のようなものでした（Railsでsimple_formを使用）：

<%= simple_form_for @review, :url => search_index_path, :method => :post, :html => {:class => 'form-inline'} do |f| %>

など...など...

Stackoverflow の助けを借りて、私の css は何度も変更され、何日も費やしましたが、最終的には次のようになりました。これは完全に機能します。

.form-inline div { 
display: inline-block;
margin-top: 5px;
 }

その「div」が何を意味するのか興味がありますか？例えば、

.form-inline { 
display: inline-block;
margin-top: 5px;
 }

動作しません。<div form-inline>whatever</div>「div」は、css ではなく、のようにマークアップ コードに入れるものだと思いました。ちょっと興味があるんだけど...

4

5 に答える 5

2

これ divは、クラスを持つ要素内のすべての div 要素を意味します.form-inline。.form-inline要素の子である必要はありません。彼らはただそこにいる必要があります。

これを例にとります：

<form class="form-inline">
   <div>a</div>
   <div>b</div>
   <p>Some text <div>d</div></p>
</form>
<div>c</div>

div■ 「a」、「b」および「d」がフォーマットされます。div「c」はありません。

于 2013-06-30T22:47:16.900 に答える
2

.form-inline divselector はdiv、 class を持つ任意の要素の子孫であるすべての要素にこのルールを適用することを意味しますform-inline。

たとえば、次のようになります。

<my-elem class="form-inline">
   <another-type />
   <div>I'll get this CSS rule</div>
   <something-else>
     <div>I'll get this CSS rule too</div>
   </something-else>
</my-elem>

CSS の HTML 要素名には、クラス (.dot を使用) や ID (#hash を使用) のようにプレフィックスは付けられません。

于 2013-06-30T22:51:00.413 に答える
1

そのルールのセットを、要素自体ではなく、要素内の任意の divに割り当てます。.form-inline.form-inline

于 2013-06-30T22:47:25.800 に答える
1

コード内の div は、CSS のセレクターの一部です。

平易な英語では、.form-inline のクラスを持つ任意の要素/タグを選択し、その要素の子孫であるすべての div を選択し、次のルールを適用することを意味します。

display: inline-block;
margin-top: 5px;

あなたの場合、子孫セレクターを使用しています

子孫セレクター

2 つの単純なセレクターの間のスペースは、組み合わせと呼ばれます。

セレクタ リファレンス

于 2013-06-30T22:48:55.790 に答える
1

使用できる CSS セレクターは多数あります。ここでそれらすべてを見つけることができます：

http://www.w3.org/TR/CSS2/selector.html

于 2013-06-30T22:50:01.130 に答える