使用CSS和HTML內聯顯示

Question

我有一個生成動態問卷的PHP代碼。 為了簡單起見，我必須保持DIV的結構完全相同。 我無法修改，添加或刪除DIV，它們必須保持原樣。 但是我可以修改CSS和CLASSES。 話雖如此，我如何將問題2和問題3內嵌顯示？

我在這里做了一個簡單的例子，您將更容易理解我的意思： http : //jsfiddle.net/radusl/4H68P/

<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>

Answer 1

正如其他人所述，這不是您所需要的理想標記，但是從技術上講，可以通過在問題2中添加一個額外的類，在我的示例.inline ，並使用float: left;來完成一些技巧float: left; clear: left;

看看這個更新的小提琴

.inline {
    float: left;
}

.inline + .bigclass {
    float: left;
    clear: left;
}

Answer 2

如果不將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;
}

Answer 3

您提到這樣的事情嗎？

http://jsfiddle.net/4H68P/1/

使用float函數：

float: left;

希望這可以幫助你。

Answer 4

我不確定您想要什么，但是如果我認為您可以添加

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

不是你想要的嗎？