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

不是你想要的吗？