1

リスト項目が複数の行にまたがる場合でも、順序付けされていないリストの箇条書きを、リスト項目の深さ全体を拡張する色のブロックに変更したいと考えています。1 つのリスト項目の折り返されたすべての行は、同じ深さでインデントする必要があります。

私が探している究極の効果は、リストの横にある 1 つの長い色付きの線です。

現時点では、単一のリスト行と同じ深さに設定された画像を使用していますが、これは明らかに複数行をカバーしていません。また、それらの間に小さな改行を配置し、リスト項目が折り返された場合、折り返されたテキストは箇条書きの下に配置されます

これは私の現在のcssです

.content-main ul li {
  line-height: 1em;
  float:left;
  text-align:left;
  vertical-align:text-bottom;
  display:list-item;
  list-style-image: url('images/bullet.gif');
  list-style-position:inside;
}

感謝して受け取ったこれに関する任意のポインタ

4

1 に答える 1

0

div, spanコンテナー ( ) などに切り替える必要があります。

<div>
  first
  <div>
     second
     <div>
     third 
     </div>
  </div>
</div>

CSS:

div { border-left:1px 単色の赤 }

これにより、項目からリストの最後までの行が生成されます。

私の JSFiddle の例を参照してくださいhttp://jsfiddle.net/G82eQ/

編集：投稿をもう一度読んで、各項目の行を表示するだけです-リストの左に長い行が1つ表示されます。http://jsfiddle.net/vENx3/を参照してください

于 2012-12-05T14:30:02.453 に答える