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;たが、これにより質問のテキストと番号が別の行に分割されます。JSビン

float: left;on を削除する.question-textと、多少は機能するように見えますが、 の下のスペースは考慮されません.question-number。JSビン

最終製品を見ずに 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 description ) を使用しない/使用できないのですか?

于 2013-07-31T19:31:33.673 に答える
0

私の理解が正しければ、ブロックテキスト全体をインデントしたいでしょう。
フロートでマージンをブロックするだけで試すことができます：

コード例

于 2013-07-31T19:38:56.463 に答える