2

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

http://jsfiddle.net/nnFpN/

我可以使 UL 元素具有 display:inline-block，这使它水平收缩，但如果我将 LI 放入 inline-block，它们开始并排出现，这不是我想要的。我希望 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;
}
4

4 回答 4

5

Adiv填充水平空间，因为它是一个块级元素display，尽管您可以通过将它的属性更改为类似的东西来改变这种行为inlineor inline-block。您可以在该链接上看到列表 (ul和ol)dl也是块级元素。

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

为了克服这个问题，您应该使用该float属性，该属性将删除元素的块性质，然后还应用一个clear属性，该属性将删除每个元素的浮动，从而使每个元素只占用它需要的空间，同时确保它们都在不同的路线上。

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

这是您编辑的示例，以按照您描述的方式工作。

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;
}
于 2013-07-20T21:22:54.417 回答
1

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

要使任何块级元素仅扩展到其内容，也就是inline-level，请将其 css 属性设置为display: inline。
这是您的问题的解决方案。
至于你的第二个问题，（一个 div 什么时候应该填充水平空间，什么时候不应该），这是你的电话。您可以使块级元素内联，反之亦然。

话虽如此，让 div 或 p 元素成为内联元素是一个糟糕的设计。您可以简单地使用跨度或任何其他内联级容器。通常的例外是使用li时。

Li 是块级的，但是如果您希望它们是水平的并且不想浮动它们，您可以将它们设为内联。请注意，通过这样做，每个 Li 的宽度将仅与其内容一样宽。此外，内联级元素不能设置填充。


希望这可以帮助。

于 2013-07-20T21:30:53.497 回答
0

您可以尝试
float:left; clear:both;
每个列表元素。

至于它们何时填满水平空间，这取决于您显示它们的方式。一个 display:block 元素将填满它的整个宽度，不管它的内容是什么，或者如果一个宽度：xx; 设置它将是您设置的确切宽度。inline-block 和 inline 的间距相似，因为它们占用了内容的空间，除非给出确切的宽度并尝试水平排列直到空间用完。

于 2013-07-20T21:18:09.460 回答
0

使用 width:auto，div 将与父 auto 一样宽，这是宽度的默认值。

于 2013-07-20T21:20:19.467 回答