漂块级素：是否有必要设置宽度，如果是，怎么样？

StackOverflow https://stackoverflow.com/questions/406504

  •  03-07-2019
  •  | 
  •  

题

说我有文本框、dropdownlists和提交按钮。他们是所有的内联的要素。这意味着"正式"保证金，填充，宽度和高度的性质应当被忽视的(在实践中没有真正).如果我去正确的方式设置的高度到一个按钮我会写的东西像显示：块然后定本的高度。但有的考虑，一块水平元将扩大本身的意外所以我会更好地设定，其宽度的一些固定的价值。问题是我不知道它的宽度，因为它可以动态定义应该文本的按钮。

另一种情况：我希望创建一个菜单过 <ul> 和 <li>.我想把它对准水平，一些项目进行分组，有一些延伸的权利。既 <ul> 和 <li> 是块级的单元。因为我希望我的菜单采取所有可用的水平的空间，那么发挥的项目的高度和有菜单项推动以双方块的模式是好的给我。我只是使用的浮动：离开和浮动：权利实现的任务。但是再次使用应该有点设置一个宽单元，因为他们是块单元。我不知道他们的宽度，因为该文本的项目可能有所不同。但它似乎一切都呈现很好，因为它是。

我有没有注意到的任何问题与联要素迫呈现为块的元素，而不是漂浮或宽度设定，或与该列表中项目的例子。它的工作只是现在IE7，FF3，歌剧9和野生动物园什么的目前的版本。该问题仍然是：我应该担心这些联对块元素或现实的框元的浮动，但没有宽设定或只是离开一切，因为它是什么？我失去了一些东西或是仅仅一个多那些东西你根本不应该期望获得对吗？

有帮助吗？

解决方案

说我有文本框、dropdownlists 和提交按钮。他们都是 内联的要素。这意味着 "正式"保证金，填充，宽度 和高度的性质应 忽视的(在实践中没有真正).如果我 去正确的方式设置 高到一个按钮我会写 像显示：块然后 定义的高度。但也有 考虑一块水平 元将扩大本身 意外所以我最好设置它 宽到一些固定的价值。的问题 是，我不知道它的宽度以来 它可以动态定义的后 案文按钮。

除非你说的是 Internet Explorer的框模型的怪癖, 你不应该担心的东西扩展或收缩的意外。只要你照顾的 正常化对于浏览器的变化, 你会好起来的。如果你有意外和不想要的副作用沿途设计的荣耀，你在调试，因为这是程序错误，你抗衡。CSS可以古怪，但是，这并不是一个适当的借口95％的时间用于最主要的浏览器。其他5％，我们不谈。

这是我了解你的问题：

你想要一个菜单的漂浮 <li> 让你有一个水平菜单跨越宽的视(什么你的用户看到'在浏览器窗口')被一致的全宽视区。

这听起来就像你是想在一个固定的宽度设计的，当时真的听起来像什么，它会适合你的目的是流体宽度的设计。这意味着创建一个设计，'弹性'和扩展和合同的相对大小的用户浏览器窗口。如果你创造你的设计预测素宽度正在设置上的每一个元素，你也许可以找到一个优雅的方式来维持畅通的宽头和导航，但有一个固定宽度的主要内容的区域。你可以找到一个快乐的介质中，没有一个完整的重新设计。 这种演练，将有可能你在找什么。 一个很好的 解释的条款固定的宽度和液体的宽度 可以在这里找到如果你不熟悉的术语和要仔细看看这些想法。

一个更进的道路：

设置一个宽度在所有的浮动元素 不仅仅是建议，但是一部分CSS2标准为每W3C。

  • 安吉丽娜

其他提示

你觉得自己有点过分紧张了。）

查看这些 链接，尤其是9.4,9.5和10.3。并且ctrl-f <！>“inline-block <！>”

如果我们采用<！>“官方<！>”;你提到的那条线，生活很简单，因为我们不需要担心宽度，高度和这些元素。

不要认为像素完美，不要担心演示的细节，遵循标准，允许浏览器<！>放大器;其用户定义样式......

（如果只是在<！>“非正式<！>”真实世界中那么直接）

好的，我想我的问题没有被正确理解。 如果我没有为浮动盒子设置宽度会发生什么？我无法设定，我不知道。因为它取决于内容。所有的盒子都会缩小到它们的内容宽度吗？这就是它在实践中的运作方式。我很满意。是否有任何官方确认应该预期这种行为？

添加了： 我在这里提出了一些有趣的内容： http://www.webmasterworld.com/css/3811603.htm

我建议检查建议，以便对差异进行更为技术性的解释，但简单地说，浮点数的行为在css2（1998）和css2.1（2005年的几个月，然后是2007年）之间发生了变化。根据css2，必须在浮点数上设置宽度，而<！> quot; shrink-wrapping <！>“;你在ff3中看到的是css2.1。这意味着2007年7月之前的浏览器符合与其制造时间相关的建议，当他们将div＃container拉伸到整个视口宽度时。 （这不解释Opera，但它总是做自己的事情。）

如果是这样，那我就争辩了。正如我所提到的，它适用于当前的IE7，FF3，Opera 9和Safari。

还有其他意见吗？

（假设我理解你的问题）

在大多数情况下，您无需在列表项上设置宽度。 但是（是的，有一个但是在这里）如果你有一个显示链接：阻止（假设你想使用推拉门）你必须做一个小技巧：

html：

<ul class="menu">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

和CSS：

.menu li {
    float:left
}
    .menu li a {
        display:block;
    }
    /* ===================== */
    /* = and the IE6 trick = */
    /* ===================== */ 
    * html .menu li a {
        width:1%;
        white-space:nowrap;
    }

如果您不这样做，那么LINK将被拉伸到所有父母。 LINK不是LIST元素;）这样设置<！>“; min-width <！>”;到IE6，你不会有任何其他问题。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top