Question

如果我有这个HTML：

<li class="name">hi</li>
<li class="name">hello</li>
<li class="name">wheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee!</li>

这个CSS：

li.name{
    border: 1px solid #A38870;
    background-color: #FA682D;
    list-style: none;
    margin: 15px;
    padding: 5px;
}

背景一直延伸到整个页面，如this。

如何使背景调整为this等文本的大小（没有明确设置每个列表元素的宽度）？

Answer 1

 display: table;

在li.name css类中添加此css代码。

Answer 2

li.name{
  /* your suff */
  float: left;
  clear: both;
}

这样当你浮动块元素时它们会适应大小的内容，问题是它们会向左浮动，所以它们会彼此相邻，为了避免这种情况你可以clear: left或{{1} }。

Answer 3

有几个解决方案，没有一个真正完美;你想要哪一个取决于你的用例。

使用display: table。这将适用于足够新的浏览器，但不适用于较旧的IE版本。
如上所述使用float: left; clear: both。只要周围没有其他漂浮物，这将有效，否则就会发生可怕的破坏。
使用特定于浏览器的CSS（例如Gecko支持width: -moz-fit-content）。这有明显的缺点。

对于您的情况，今天display: table可能效果最好，但是我们可以希望fit-content的{{1}}值得到标准化。

Answer 4

更正了，在这里工作：http://jsfiddle.net/ezmilhouse/3jRx7/1/

li.name{
    border: 1px solid #A38870;
    background-color: #FA682D;
    display:inline;
    list-style: none;
    line-height:36px;
    padding:4px;
}

li.name:after { 
    content:"\A";
    white-space:pre;
}

Answer 5

尝试使用clear:both; float: left属性。

Answer 6

我认为最好的方法是使用特定于浏览器的CSS，为每个浏览器写一行，就像Justin Geeslin在这里解释的那样：

Is there a css cross-browser value for "width: -moz-fit-content;"?

p{
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}

Answer 7

给它display: inline-block

li.name{
    border: 1px solid #A38870;
    background-color: #FA682D;
    list-style: none;
    margin: 15px;
    padding: 5px;

    display: inline-block;

}

如何使块元素适应其内部的大小？

7 个答案: