如何在另一个div的同一行显示div的内容？

Question

我在HTML中有以下结构：

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

我想要的是在问题后显示内容（T或F）：

如果数据值为真：

问题T

否则

问题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;}

您的解决方案仍然将div保留为block的默认显示，默认情况下它们都保留在width: 100%，因此需要将div本身作为目标。其他选项包括table / table-cell或flex的显示。