Question

我正在尝试将某些内容设置为在考试中显示为问题，类似于：

这是包含在新行中的内容，并且会尊重最左边的div，使其看起来像是您在考试中看到的问题。

假设这样的HTML结构：

<div class="header">
  <div class="question-label">1. </div>
  <div class="question-text">
    How satisfied are you with life?
  </div>
</div>

我已尝试将.question-label和question-text同时设置为display: block; float: left;，但这会将问题文本和数字分成不同的行。 JSBin

如果我删除float: left;上的.question-text，它似乎有些效果，但它不尊重.question-number下的空格。 JSBin

我知道在没有看到最终产品的情况下很难正确回答CSS问题，但是如果不诉诸表格，你会如何建议实现这一目标？

Answer 1

有几种方法可以做到这一点。这是我的最爱：

.question-label, .question-text {
    display:table-cell;
}

http://jsfiddle.net/xxzzu/

Answer 2

我已更新你的css：

body {
  width: 400px;
}

.num {
  display: inline-block;
  width: 40px;

  /* this makes the "1." bound to the top. You can also use middle or bottom,
     see http://www.w3.org/wiki/CSS/Properties/vertical-align */
  vertical-align: top;
}

.txt {
  display: inline-block;
  width: 350px;
}

技巧是display: inline-block;

在此处也可以看到：jsFiddle

但为什么不能/不能使用<ol>（w3c description）？

Answer 3

如果我理解你的话，你想要缩进整个块文本。
你可以尝试使用浮点数块边距：

code example

如何设计类似于考试问题的风格

3 个答案: