Question

从这里的所有问题，我假设大多数人都希望他们的div（或lis或其他）填补水平空间。我希望它们只在我需要的时候。在这里，它们填满了水平空间：

我可以让UL元素显示：inline-block，这会使它水平缩小，但是如果我把LI放到内联块中，它们会开始并排出现，这不是我想要的。我希望LI只有它们需要的范围。

此外，何时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;
}

Answer 1

div填充水平空格，因为它是block-level element，但显然可以通过将display属性更改为inline或{{1}来改变此行为}。您可以在该链接上看到列表（inline-block，ul和ol）也是块级元素。

在您的情况下，如果您希望元素只占用它所需的空间，那么您应该使用dl或inline（内联块允许您添加填充/边距等）。但是，因为这会删除DIV / UL的默认块性质，正如您所指出的那样，每个元素都会在同一水平行上跟随下一个元素。

为了克服这个问题，你应该使用inline-block属性，这将删除元素的块性质，但是也应用float属性，它将删除每个元素的浮点数，从而使每个元素只占用它所需的空间，同时确保它们都在不同的线上。

还要确保清除列表后面的元素，或者将micro-clearfix hack应用于列表。

并且here's your example已按照您描述的方式进行编辑。

HTML

clear

CSS

<!-- 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>

Answer 2

Div是一种称为块级元素的元素。默认情况下，块级元素填充其容器的所有水平空间，因为默认情况下，它们具有样式属性 display：block; 。

要使任何块级元素仅扩展为其内容（又名内联级），请将其css属性设置为 display：inline 。
这是您的问题的解决方案。
关于你的第二个问题，（如果一个div填充一个水平空格，什么时候不应该？），那就是你的召唤。您可以将块级元素内联，反之亦然。

话虽这么说，将div或p元素作为内联级元素是一个糟糕的设计。您只需使用 span 或任何其他内联级容器即可。通常的例外是使用 li 时。

Li是块级的，但是如果你想要它们是水平的并且不想浮动它们，你可以使它们内联。请注意，通过这样做，每个Li的宽度只能与其内容一样宽。此外，内联级元素不能具有其填充集。

希望这会有所帮助。

Answer 3

你可以试试
float:left; clear:both;
对于每个列表元素。

至于他们什么时候填充他们的水平空间，这取决于你显示它们的方式。 display：block元素将大声填充整个宽度，无论其内容如何，或者宽度为：xx;设置它将是您设置的确切宽度。内联块和内联的间距相似，它们占据内容的空间，除非给定一个确切的宽度并尝试水平排列直到它们用完空间。

Answer 4

宽度：auto，div将与父级一样宽 auto是width的默认值。

div何时填充水平空间，何时不填充？

4 个答案: