0

動的アンケートを生成する PHP コードがあります。話を短くするために、DIV の構造をそのまま維持する必要があります。DIV を変更、追加、または削除することはできません。現在のままにしておく必要があります。しかし、CSS と CLASSES は変更できます。そうは言っても、質問2と質問3をインラインで表示するにはどうすればよいですか?

私はここでこの簡単な例を作りました . 

<style type="text/css">
    .bigclass {
    margin-left: 10px;
}

.smallclass {
    margin-left: 20px;
}

.question {
    font-weight: bold;
     margin-left: 10px;
}
  </style>


<div class="question">Question 1</div>
<div class="bigclass">
    <div class="smallclass">
        Text1_a
    </div>
    <div class="smallclass">
        Text1_b
    </div>
</div>


<div class="question">Question 2</div>
<div class="bigclass">
    <div class="smallclass">
        Text2_a
    </div>
    <div class="smallclass">
        Text2_b
    </div>
</div>


<div class="question">Question 3</div>
<div class="bigclass">
    <div class="smallclass">
        Text3_a
    </div>
    <div class="smallclass">
        Text3_b
    </div>
</div>

<div class="question">Question 4</div>
<div class="bigclass">
    <div class="smallclass">
        Text4_a
    </div>
    <div class="smallclass">
        Text4_b
    </div>
</div>


<div class="question">Question 5</div>
<div class="bigclass">
    <div class="smallclass">
        Text5_a
    </div>
    <div class="smallclass">
        Text5_b
    </div>
</div>
4

4 に答える 4

1

questionラップせずbigclassに別の方法でこれを行うことはできませんdiv

HTML

<div class="inline-question">
    <div class="question">...</div>
    <div class="bigclass">...</div>
</div>

CSS

.inline-question {
    display: inline-block;
}

questionラッピングせず、bigclass並べて見せるだけ

Q1 T1 Q2 T2 Q3 T3 ...

CSS

.question, .bigclass {
    display: inline-block;
}
于 2013-10-25T11:15:58.013 に答える
0

あなたが何を望んでいるのかよくわかりませんが、それがあなたが追加できると思うものなら

display:inline;

あなたの小さなクラスで。

一部の質問のみにこれが必要な場合は、新しいクラスを作成します。

.inlineClass {
    display:inline;
}

そして、あなたが望む答えのためにこのクラスを呼び出します:

<div class="smallclass inlineClass">

** * **編集* ** * ** * **

回答を質問番号と並べて表示する場合は、次のようにクラスを追加します。

<div class="question inlineClass">Question 3</div>
<div class="bigclass inlineClass">
    <div class="smallclass inlineClass">
        Text3_a
    </div>
    <div class="smallclass inlineClass">
        Text3_b
    </div>
</div>

私はこの結果を持っています:

Question 1
Text1_a
Text1_b
Question 2
Text2_a
Text2_b
Question 3 Text3_a Text3_b
Question 4
Text4_a
Text4_b
Question 5
Text5_a
Text5_b

それはあなたが望むものではありませんか？

于 2013-10-25T11:12:20.510 に答える