4

私たちのウェブデザイナーは、次の画像のような垂直のUL/LIリストを望んでいます。

取得しようとしているもの

しかし、私が得たこのスタイルを使用して

ここに画像の説明を入力してください

麦粒腫は次のとおりでした

    <style type="text/css">
ul {
    list-style: none;

}
ul li:after {
    content: "\25BC \0020";
}

ul li:before {
    content: "\25A0 \0020"; color:#C60;
}
</style>

テーブルに渡すつもりですが、行が流れている場合にも、整列されたリストを取得する方法はありますか？

4

3 に答える 3

5

親の ul の position: relative と、before/after 疑似要素の position: relative を設定する必要があります。

ul {
  list-style: none;
  position: relative;
}

ul li {
  padding-left: 20px;
  padding-right: 20px;
}
ul li:after {
  content: "\25BC \0020";
  position: absolute;
  right: 5px;
}

ul li:before {
  position: absolute;
  left: 5px;
  content: "\25A0 \0020"; color:#C60;
}

JS フィドル: http://jsfiddle.net/QgBvb/

于 2013-01-29T16:04:00.977 に答える
5

このjsfiddleは非常にうまく機能します。li left-margin と text-indent は使用するアイコンに依存することに注意してください。ただし、このように、フォント サイズを変更しても配置が維持されます。

CSS

ul {
    list-style: none;
    width: 150px;
    font-size: 16px;
    text-transform: uppercase;
}

ul li {
    text-indent: -0.88em;
    margin-left: 0.88em;
    position: relative;
    padding-right: 1em;
}

ul li:before {
    content: "\25A0";
    color: #C60;
    vertical-align: text-bottom;
    margin-right: .25em;
}

ul li:after {
    color: #C60;
    font-size: 0.8em;
    content: "\25BC";
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -.5em;
}

編集: vertical-align: text-bottom;FFでアイコンとテキストの配置が改善されます。

于 2013-01-29T16:08:12.443 に答える
-1 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
 <div > 
                    <ul>
                        <li> </li>
                            <li class="first"><a href="f.php">Fragrances</a></li>
                                <li> </li>
                            <li><a href="c.php">Cosmetics</a></li>
                        <li> </li> 
                        <li><a href="s.php">Stuffed Toys</a></li>
                       <li> </li>
                        <li><a href="b.php">Housing</a></li>
                        </ul>
                </div>

</body>
</html>

これは新しいファイルです。コピーして結果を確認してください。li と ul を正しく使用する必要があります。

于 2013-01-29T16:03:00.000 に答える