1

順序付けられていないリストの各リスト項目には、2 つのインライン ブロック要素とアンカー テキストがすべて隣り合っています。したがって、それぞれ<li>に 2 つのアイコンとテキストがあります。

この 2 つのアイコンを作成した理由display:inline-blockは、高さが異なり、その横のアンカー テキストが複数行になる場合があるため、vertical-alignルールによって 1 行目に中央揃えできるためです。

とにかく、このアンカー タグには:hoverスタイルがあり、基本的にはbackground-color:gray. 何らかの理由で、このアンカー要素を一般的な解決策でブロックすることに成功できませんでした。

私がやったことはうまくいきましたが、このソリューションに頼ることはできません。これは、幅と幅にハードコードされたものを使用して<ul>おり<a>、リストにスクロールバーが必要な場合、これらの幅をバーの幅から差し引く必要があるためです。以下は、誰かに光を当てる場合の私の現在の解決策です。

アンカー テキストに margin-left を指定して に設定しようとしましたがdisplay:absolut、役に立ちませんでした。私もパーセンテージを与えようとしましたが、もう一度...最終的に要素をフローティングしようとしましたが、テキストが複数行になる可能性があり、各要素をテキストの最初の行の垂直方向の中央に配置するため、おそらくここで最も間違った解決策です. 私の次の推測は、各リスト項目でテーブルを使用することですが、それはおそらく利用可能な最も汚い解決策であり、必要がない限り使用したくありません。

どのようにしますか？詳細が必要な場合はお知らせください。

CSS

ul {
    overflow:auto;
    height:6em;
    width:320px;
}
li .icon1 {
    display:inline-block;
    width:13px;
    height:12px;
    vertical-align:top;
    background:url(image.jpg) left top no-repeat;
}
li .icon2 {
    display:inline-block;
    width:9px;
    height:10px;
    margin-right:2px;
    background:url(image.jpg) left -12px no-repeat;
}
li a {
    display:inline-block;
    padding-left:4px;
    vertical-align:top;
    width:270px;
}
li a:hover {
    background-color:lightgray;
}

HTML

<ul>
    <li>
        <div class="icon1"></div>
        <div class="icon2"></div>
        <a href="#">Some anchor text</a>
    </li>
    <!-- many other li items in here -->
</ul>

これは、私が達成しようとしていることを説明するための画像です。

疑似画像

前もって感謝します。

4

2 に答える 2

2

私が考えることができる最良の2つのソリューションは次のとおりです。1）以下のCSSの例を使用：

ul {
    overflow:auto;
    height:6em;
    width:320px;
}
.icon1 {
    width:13px;
    height:12px;
    vertical-align:top;
    background:url(image.jpg) left top no-repeat;
    border: 1px solid black;
}
.icon2 {
    display:inline-block;
    width:9px;
    height:10px;
    margin-right:2px;
    background:url(image.jpg) left -12px no-repeat;
}
li a {
    display:block;
    padding-left:4px;
    vertical-align:top;
    border: 1px solid black;
}
li a:hover {
    background-color:lightgray;
}

HTML:

<ul>
    <li>
        <a href="#"><img class="icon1" src="image.jpg" alt="icon1"/><img class="icon2" src="image.jpg" alt="icon2"/>Some label in here!</a>
    </li>
    <li>
        <a href="#"><img class="icon1" src="image.jpg" alt="icon1"/><img class="icon2" src="image.jpg" alt="icon2"/>Some label in herdsafasdfasdfsad sadfasd sadfasd asdfsade!</a>
    </li>
</ul>

2) 以下を使用して、li アイテムに背景画像を追加することもできます。

background-image: url(image.jpg);

アイコン用

于 2012-08-12T02:40:53.300 に答える
0

さて、私はそれを解決する方法を見つけました。これは理想的な解決策ではないと確信していますが、問題なく動作するようです (まだ、私が試したブラウザーでは)。

誰かがより良い解決策を持っている場合は、私に知らせてください。

これがコード全体です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Another dirty (but better) solution</title>
<style type="text/css">
body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
ul {
    overflow:auto;
    width:18em;
    height:6em;
    list-style:none;
    margin:0;
    padding:0;
}
li {overflow:hidden;}
li .icons {
    float:left;
    margin:-0.1em 0;
}
li .icons .icon1 {
    display:inline-block;
    width:13px;
    height:12px;
    vertical-align:middle;
    background-color:red;
}
li .icons .icon2 {
    display:inline-block;
    width:9px;
    height:10px;
    vertical-align:middle;
    background-color:green;
    margin-bottom:1px; /* here's the dirty hack: (icon1.height-icon2.height) / 2 */
}
li a {
    color:inherit;
    text-decoration:none;
    display:block;
    padding:0 4px;
    margin-left:24px;
}
li a:hover {
    background-color:lightgray;
}
</style>
</head>
<body>
    <ul>
        <li>
            <div class="icons"><div class="icon1"></div><div class="icon2"></div></div>
            <a href="#">Some link text</a>
        </li>
        <li>
            <div class="icons"><div class="icon1"></div><div class="icon2"></div></div>
            <a href="#">Some other link text</a>
        </li>
        <li>
            <div class="icons"><div class="icon1"></div><div class="icon2"></div></div>
            <a href="#">A longer link text here</a>
        </li>
        <li>
            <div class="icons"><div class="icon1"></div><div class="icon2"></div></div>
            <a href="#">Shrt lnk txt</a>
        </li>
        <li>
            <div class="icons"><div class="icon1"></div><div class="icon2"></div></div>
            <a href="#">Much much looooonger text in here</a>
        </li>
        <li>
            <div class="icons"><div class="icon1"></div><div class="icon2"></div></div>
            <a href="#">Just another link text</a>
        </li>
    </ul>
</body>
</html>
于 2012-08-12T23:54:18.697 に答える