0

我有一个生成动态问卷的 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>
4

4 回答 4

2

正如其他人所说，这不是您需要的理想标记，但在我的示例中，通过向 question2 添加一个额外的类，并使用和做一些技巧，这在技术上是可能.inline的float: left;clear: left;

看看这个更新的小提琴

.inline {
    float: left;
}

.inline + .bigclass {
    float: left;
    clear: left;
}
于 2013-10-25T11:22:57.623 回答
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

你提过这样的事？

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

使用浮点函数：

float: left;

希望这可以帮助你。

于 2013-10-25T11:10:57.253 回答
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 回答