1

我正在尝试将某些内容设置为看起来像考试中的问题，类似于：

  1. 这是将换行到新行的内容，并将尊重最左边的 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;on .question-text它似乎有点工作，但是它不尊重.question-number. JSBin

我知道 CSS 问题很难在没有看到最终产品的情况下正确回答，但是您如何建议在不借助表格的情况下实现这一点？

4

3 回答 3

3

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

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

http://jsfiddle.net/xxzzu/

于 2013-07-31T19:35:07.553 回答
0

我已经更新了你的 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 描述）？

于 2013-07-31T19:31:33.673 回答
0

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

代码示例

于 2013-07-31T19:38:56.463 回答