CSS와 HTML을 사용하여 인라인으로 표시

Question

동적 인 설문지를 생성하는 PHP 코드가 있습니다. 이야기를 짧게하기 위해 나는 DIV의 구조를 정확하게 그대로 유지해야한다. DIV를 수정, 추가 또는 삭제할 수 없으며 지금 그대로 유지해야합니다. 하지만 CSS와 클래스를 수정할 수 있습니다. 그렇게 말하면서 질문 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

, 이것은 당신이 필요에 적합 마크 업 아니지만, 몇 가지 트릭을 내 예를 .inline에, question2하는 추가 클래스를 추가하고 수행하여 기술적으로 가능하다 그래서 this updated fiddle

.inline { 
    float: left; 
} 

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

Answer 2

이 뭔가를, 표준 :

난 당신이 무슨 뜻인지를 참조하는 것이 쉬울 것이다, 여기에이 간단한 예제를 만들어? 이 당신을 도와줍니다

float: left; 

희망 :

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

는 부양 기능을 사용합니다.

Answer 3

나는 당신이 원하는 것을 이해에 확실하지 않다하지만 내가 생각하는 거라면 당신은 당신의 smallclass에

display:inline; 

를 추가 할 수 있습니다.

<div class="smallclass inlineClass"> 

** * : 당신이 원하는 답변이 클래스를

.inlineClass { 
    display:inline; 
} 

과 전화 : 당신은 단지 몇 가지 질문에 대해이 작업을하려면

, 새로운 클래스를 생성 ** EDIT * ** * ** * **

그리고 당신은 답변이 질문의 수를 나란히 할이 같은 클래스를 추가하려면 :

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 

:

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

나는이 결과를 가지고

당신이 원하는 것이 아닌가요?

당신은

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

CSS

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

포장없이, 당신은 단지 question 및 bigclass면을 보여줄 수있는 또 다른 div

HTML에 question 및 bigclass을 포장하지 않고이 작업을 수행 할 수

Answer 4

옆으로

Q1 T1 Q2 T2 Q3 T3 ... 

CSS는

다른 사람이 언급 한 것처럼

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