1

カスタム リスト イメージを使用するときに問題が発生します。ここでは、リストがラップするフロート要素の後ろにアイコンが隠れています。

http://jsfiddle.net/V8evM/

HTML

<div>

</div>
<ul>
    <li>This is list item no 1</li>
    <li>This is list item no 2. This is list item no. This is list item no. This is list item no. This is list item no. This is list item no. This is list item no.</li>
    <li>This is list item no 3</li>
</ul>

CSS

div {
    background: rgba(0,0,0,0.8);
    float: left;
    width: 100px;
    height: 40px;
    margin: 0 20px 10px 0
}

li {
  padding-left: 1.3em ;
}

li:before {
  content: "i";
  display: inline-block;
  margin-left: -1.3em;
  width: 1.3em;
}

注: 余分なマークを追加したくありません。CSS のみです。

負のマージンなしで試してみました（http://jsfiddle.net/9qWGE/）が、これによりアイコンの下に長いリストが表示されます

4

2 に答える 2

0

ul 要素に取り組み、マージンとパディングを調整します。

ul {
    padding-left:10px; /* fit this number to your needs */
    margin-left:111px; /* fit this number to your needs */
}

http://jsfiddle.net/z8m46/

于 2013-08-28T13:44:36.327 に答える