如何在另一個div的同一行顯示div的內容？

Question

我在HTML的結構如下：

<div class="block"> 
     <div class="question"> 
     Question 
     </div> 
     <div class="answer" data-value="true"> 
     </div> 
</div> 

我想是顯示問題後的內容（T或F）：

如果數據值是true：

問題牛逼

其他

問題˚F

在CSS我試圖讓這種方式：

.answer[data-value="true"]:after { 
content: "T"; 
display: inline; } 

.answer[data-value="false"]:after { 
    content: "F"; 
    display: inline; 
} 

但它似乎並不工作，輸出如下：

問題

牛逼

或

問題

F

Answer 1

解決方法有很多，但一個是要做到這一點：

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

您的解決方案在block其默認顯示，這使得他們無論是在width: 100%默認情況下，仍然留下的div，所以需要的是把目標對準自己。其他選項包括table/table-cell或flex的顯示。

Answer 2

像這也許

.question[data-value="true"]:after { 
 
content: "T"; 
 
display: inline; } 
 

 
.question[data-value="false"]:after { 
 
    content: "F"; 
 
    display: inline; 
 
}

<div class="block"> 
 
     <div class="question" data-value="true"> 
 
     Question 
 
     </div> 
 
</div>