我怎样才能让李的背景与其中的文字长度相同？ [英] How can I make the background of an li the same length as the text in it?

问题描述

我有以下HTML：

 < div id =resultList> 
< ul> 
< li class =product> < a href =＃title => Hevea fopspeentje Kroon< / a> 
 
< / li> 
< li class =product> < a href =＃title =>BabyBjörnBabybord遇到了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会见了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; 
背景：#ffffff; 
} 
 
 #resultList a {
 padding：8px 14px; 
颜色：＃072f49; 
 text-decoration：none; 
 display：block; 
} 
 #resultList ul li {
 margin-bottom：10px; 
颜色：＃072f49; 
 list-style：none; 
背景：＃f5f5f5; 
 display：inline-block; 
 -webkit-transition：背景0.3s易用性; 
 -moz-transition：背景0.3s缓解; 
 -o-transition：background 0.3s ease; 
过渡：背景0.3s缓解; 
} 
 
 #resultList .product {
 width：100％; 
 display：inline-block; 
} 
  

和 jsFiddle

我想每个产品都在不同的路线上。这就是为什么我将 #resultList .product 设置为 width：100; 然而，我想要 #resultList ul li 只与文本本身一样长。

有没有办法做到这一点？

将 background-color 移动到 < li> 中的< a> 元素。

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

  #resultList ul li {
 margin-bottom：10px; 
 list-style：none; 
 display：block; 
} 
 
 #resultList .product A {
 color：＃072f49; 
背景：＃f5f5f5; 
 display：inline-block; 
} 
  

I have the following 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>

and 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;
}

and the jsFiddle

I would like each product do be on a different line. That is why I set #resultList .product to width:100; However, I would like the background of the #resultList ul li to only be as long as the text itself.

Is there a way to do this?

解决方案

Move the background-color to the <a> element inside the <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;
}

这篇关于我怎样才能让李的背景与其中的文字长度相同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！