Question

我有以下HTML：

<div id="resultList">
    <ul>
        <li class="product"> <a href="#" title="">Hevea fopspeentje Kroon</a>

        </li>
        <li class="product"> <a href="#" title="">BabyBjörn Babybord met babylepel 2-Pack</a>

        </li>
        <li class="product"> <a href="#" title="">Janod Scooter Vanilla</a>

        </li>
        <li class="product"> <a href="#" title="">Numi-Med Medicijnspeen met doseerschijf Wit (6-18 mnd)</a>

        </li>
    </ul>
</div>

和CSS：

#resultList {
    max-width: 557px;
    margin-top: 13px;
    padding: 20px;
    border: 4px solid #c7c6c6;
    border-radius: 4px;
    background: #ffffff;
}

#resultList a {
    padding: 8px 14px;
    color: #072f49;
    text-decoration: none;
    display: block;
}
#resultList ul li {
    margin-bottom: 10px;
    color: #072f49;
    list-style: none;
    background: #f5f5f5;
    display: inline-block;
    -webkit-transition: background 0.3s ease;
    -moz-transition: background 0.3s ease;
    -o-transition: background 0.3s ease;
    transition: background 0.3s ease;
}

#resultList .product {
    width: 100%;
    display: inline-block;
}

和jsFiddle

我希望每个产品都在不同的产品线上。这就是为什么我将#resultList .product设置为width:100;但是，我希望#resultList ul li的背景只与文本本身一样长。

有办法做到这一点吗？

Answer 1

将background-color移至<a>内的<li>元素。

http://jsfiddle.net/NicoO/7nR7T/4/

#resultList ul li {
    margin-bottom: 10px;
    list-style: none;
    display: block; 
}

#resultList .product A {
    color: #072f49;
    background: #f5f5f5;
    display: inline-block;
}

Answer 2

为a添加背景css代码并删除li中的背景。 Demo

#resultList a {
    background:#F5F5F5;
    color: #072F49;
    display: block;
    float: left;
    padding: 8px 14px;
    text-decoration: none;
}

#resultList ul li {
    margin-bottom: 10px;
    list-style: none;    
    display: inline-block;
}

Answer 3

您可以在#resultList .product中设置width:inherit而不是设置为100％。

更新了小提琴。 DEMO

如何使li的背景与文本中的文本长度相同？

3 个答案: