0

スタイリングに使用するクラスがいくつかあり、それらはすべてブロックモードを使用して表示されます。すべてをインラインに変換したいと思います。各クラスに手動で移動する代わりに、すべてをインラインに変換する簡単な方法はありますか。それらを個別にインラインに変換します...

コードのセクション：

<div class="contentbody">
    <p>
        Register here!
    </p>
    <a href="{% url 'parent_register_step1' %}"
       class="bbutton textshadowclass boxshadow">
        <div class="boxshadowinset green">
            Register
        </div>
    </a>
    <p>
        Forgot your password?
    </p>
    <a href="{% url 'parent_forgot_password' %}"
       class="bbutton textshadowclass boxshadow">
        <div class="boxshadowinset green">
            Reset Password
        </div>
    </a>
</div>

クラスbbutton、textshadowclass、box shadow、boxshadowinset greenをインラインに変更したいと思います。最も簡単な方法は何ですか？

注：このクラスは、ページの他のセクションで使用されます。特定のセクションをインラインのみに変更したいと思います。ページ全体に影響を与えるべきではありません...

私がしていることをもっと詳しく説明しましょう： ここに画像の説明を入力してください

これをインラインに変換して、登録パスワードとリセットパスワードが同じ行に表示されるようにします...

4

2 に答える 2

1

クラスではなくクラスのみを選択するには、 CSS element>element Selectorcontentbodyが必要です。

div.contentbody>.bbutton, div.contentbody>.textshadowclass, ... {
  display: inline;
}

(他のクラスも含めたい場合は、リストにクラスを追加してください)

追加メモ: これらのクラスを永続的にインラインにする必要がある場合は、各クラスに (1 回) 移動し、各要素にインライン クラスを追加することをお勧めします。これにより、長期的にはコードがより明確になります。

編集：

ユニオンセレクターを使用して（申し訳ありませんが、より公式なリンクが見つかりません）、複数のクラスが設定されている要素を選択します。

div.contentbody>.boxshadowinset.green {
  display: inline;
}

と の間 (および.スペースなし) に注意してくださいboxshadowinsetgreen

これは最新のブラウザーでサポートされていると思いますが、IE6 にはいくつか問題があるようです。

于 2012-06-21T08:10:01.100 に答える
1

1 つの方法は、ラッピング要素に id を適用することです。

<div class="contentbody" id="contentbody">

次に、CSS にスタイリングを追加します。

div#contentbody a, div#contentbody div{ display: inline; }

CSS 要素階層により、それらはすべて独自のスタイルではなくインライン スタイルを使用します。

基本的な例はこちら。http://jsfiddle.net/H97c5/2/

于 2012-06-21T08:15:57.817 に答える