根据这里的所有问题，我认为大多数人都希望他们的div（或lis或其他什么）来填充水平空间。我希望它们只在我需要的时候存在。在这里，它们填充了水平空间：
http://jsfiddle.net/nnFpN/
我可以使UL元素具有display:inline块，这使它水平收缩，但如果我将LI放在inline块中，它们开始并排出现，这不是我想要的。我希望LIs只有他们需要的宽度。
此外，div（或ul或li或其他什么）什么时候应该填充水平空间，什么时候不应该？
html:
<div id="center_main">
<div id="data_box" class="center_box">
<ul id="keys">
<li class="key">key1</li>
<li class="key">key1 . key2</li>
<li class="key">key1 . key3</li>
<li class="key">key1 . key3 . key4</li>
<li class="key">key5</li>
</ul>
</div>
</div>
css：（很抱歉重复，它们来自两个不同的文件，layout.css和colors.css）
#center_main {
margin: 25px auto;
}
.center_box {
margin: 10px 0px;
padding: 3px;
}
#keys {
padding: 0px;
margin: 0px 2px;
}
#keys li {
padding: 1px 3px;
margin: 3px 0px;
}
body {
background-color: #F1F1F1;
color: #333333;
}
.center_box {
background-color: #FFFFFF;
box-shadow: 0 0 10px #333333;
border-radius: 4px;
border: 0px solid #3981EC;
border-width: 4px 0px 0px 0px;
}
#keys {
list-style: none;
}
#keys li {
background-color: #666666;
color: #FFFFFF;
border-radius: 4px;
}
#keys li:hover{
background-color: #3981EC;
}
div填充水平空间，因为它是块级元素，尽管您可以通过将其display属性更改为类似inline或inline-block的属性来明显地改变这种行为。您可以在该链接上看到，列表（ul、ol和dl）也是块级元素。
在您的情况下，如果您希望一个元素只占用它所需的空间，那么您应该使用inline或inline-block（允许您添加填充/边距等的内联块）。然而，正如您所指出的，因为这删除了DIV/UL的默认块特性，所以每个元素都会跟在同一水平行上的下一个元素后面。
为了克服这一点，您应该使用float属性，它将删除元素的块特性，但也可以应用clear属性，它会删除每个元素的浮点值，从而使每个元素只占用所需的空间，同时确保它们都在不同的行上。
还要确保列表后面的元素被清除，或者对列表应用micro-clearfix破解。
下面是你的例子，按照你描述的方式进行了编辑。
HTML
<!-- Note added the .cf class -->
<ul id="keys" class="cf">
<li class="key">key1</li>
<li class="key">key1 . key2</li>
<li class="key">key1 . key3</li>
<li class="key">key1 . key3 . key4</li>
<li class="key">key5</li>
</ul>
CSS
#keys li {
padding: 1px 3px;
margin: 3px 0px;
float:left;
clear:both;
}
div是一种称为块级元素的元素类型。块级元素，默认情况下，填充其容器的所有水平空间，因为默认情况下它们具有样式属性display:Block
要使任何块级别的元素仅扩展到其内容，也就是内联级别，请将其css属性设置为显示：内联
这就是解决你问题的办法
至于您的第二个问题，（div何时应该填充水平空间，何时不应该填充），这是您要做的决定。您可以使块级元素内联，反之亦然
话虽如此，将div或p元素作为内联级别的元素是一种糟糕的设计。您可以简单地使用span或任何其他内联级别的容器。通常的例外情况是在使用li时
Li是块级别的，但如果您希望它们是水平的，而不希望浮动，则可以使它们内联。请注意，通过这样做，每个李的宽度将仅与其内容一样宽。此外，内联级别的元素不能设置其填充
希望这能有所帮助。
如果宽度为auto，div将与父级一样宽auto是宽度的默认值。
您可以尝试float:left;
clear:both;
对于每个列表元素。
至于它们什么时候填满水平空间，这取决于你展示它们的方式。display:block元素将大声填充整个宽度，无论其内容如何，或者如果宽度为xx；设置后，它将是您设置的确切宽度。内联块和内联的间距相似，因为除非给定确切的宽度，否则它们会占用内容的空间，并试图水平排列，直到空间用完。