浮动块级元素：是否需要设置宽度，如果是，如何？

Question

说我有文本框，下拉列表和提交按钮。它们都是内联元素。这意味着应该忽略“正式”边距，填充，宽度和高度属性（实际上并非如此）。如果我以正确的方式将高度设置为按钮，我会写一些像display：block然后定义高度。但是考虑到块级元素会意外地扩展，所以我最好将其宽度设置为某个固定值。问题是我不知道它的宽度，因为它可以在按钮文本上动态定义。

另一种情况：我希望通过<ul>和<li>创建一个菜单。我想让它水平对齐，一些项目分组到左边，一些项目向右拉伸。 <ul>和<li>都是块级元素。因为我希望我的菜单占用所有可用的水平空间，然后玩物品高度并将菜单项推到两侧，块模式对我来说很好。我只需使用float：left和float：right来完成任务。但是再次使用应该为菜单元素设置宽度，因为它们是块元素。我不知道他们的宽度，因为项目的文字可能会有所不同。但似乎所有东西都被渲染得很好。

我没有注意到内联元素被强制渲染为块元素而没有浮动或宽度设置或列表项示例的任何问题。无论当前版本是什么，它在IE7，FF3，Opera 9和Safari中都能正常工作。问题仍然存在：我是否应该担心这些内嵌到块的元素或实际的块元素是否浮动但没有设置宽度或只是保留所有内容？我错过了什么，或者只是你不应该期望得到的那些东西中的一个？

Answer 1

  

说我有文本框，下拉列表   并提交按钮。他们都是   内联元素。意思就是   “官方”保证金，填充，宽度   和高度属性应该是   忽略了（实际上并非如此）。如果我   是以正确的方式设置   我会写一个按钮的高度   像display：block然后   定义高度。但是这里有   块级别的考虑因素   元素会自我扩展   出乎意料的是，我最好设置它   宽度到某个固定值。问题   是因为我不知道它的宽度   它可以动态定义   按钮的文字。

除非你指的是Internet Explorer's box model quirks，否则你不应该担心任何意外扩张或收缩的事情。只要你照顾normalizing for browser variation，你就可以了。如果您在设计荣耀的过程中遇到意外和不必要的副作用，请进行调试，因为这是您遇到的程序员错误。 CSS可能很古怪，但对于大多数主流浏览器来说，这不是95％的合适借口。另外5％我们不讨论。

这就是我理解你的问题的方法：

您需要一个浮动的<li>菜单，以便您有一个横跨视口宽度的水平菜单（用户在浏览器窗口中看到的内容）始终是视口的整个宽度。

这听起来像是在考虑固定宽度设计，当真正听起来适合您的目的时，它是一种流体宽度设计。这意味着您创建了一个“弹性”设计，并相对于用户浏览器窗口的大小进行扩展和收缩。如果您创建的设计预期在每个元素上设置像素宽度，您可能会找到一种优雅的方法来维护流体宽度的标题和导航，但具有固定宽度的主要内容区域。你可以找到一个没有完全重新设计的快乐媒体。 This walkthrough will likely be what you're looking for.如果你不熟悉行话，并且想要仔细研究这些想法，可以在这里找到一个好的explanation of the terms fixed-width and fluid-width。

另一条道路：

Setting a width on all floated elements不仅是推荐的，而且是W3C的CSS2标准的一部分。

• 安吉丽娜

Answer 2

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

查看these links，尤其是9.4,9.5和10.3。并且ctrl-f“inline-block”

Answer 3

如果我们选择你提到的“官方”系列，那么生活很简单，因为我们不需要担心这些元素的宽度，高度等。

不要认为像素完美，不要担心演示文稿的细节，遵循标准，允许浏览器＆amp;其用户定义样式......

（如果只是在“非官方”真实世界中真的那么直接）

Answer 4

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

添加了： 我在这里写了一些有趣的东西：http://www.webmasterworld.com/css/3811603.htm

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

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

还有其他意见吗？

Answer 5

（假设我理解你的问题）

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

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元素;）这样你就可以为IE6设置一个“min-width”，你就不会有任何其他问题。