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

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

另一种情况：我希望通过<ul>和<li>创建一个菜单。我想让它水平对齐，其中一些项目分组到左侧，另外一些项目向右延伸。 <ul>和<li>都是块级元素。由于我希望我的菜单能够获得所有可用的水平空间，因此要玩高度项目并将菜单项目推送到两侧，块模式对我来说很好。我将使用float：left和float：right来完成任务。但是再次使用应该有点宽度菜单元素，因为它们是块元素。我不知道它们的宽度，因为这些项目的文字可能会有所不同。但似乎所有东西都很好地表现出来。

我还没有注意到任何内嵌元素都被强制呈现为块元素而不被浮动或宽度设置，或者与列表项例子有任何问题。无论当前版本如何，它在IE7，FF3，Opera 9和Safari中都可以正常工作。问题依然存在：我是否应该担心这些内嵌块元素或实际块元素浮动，但没有设置宽度或者只是保持原样？我是否错过了某些东西，还是仅仅是你不应该期待正确的那些东西？

来源

2009-01-02 user50855

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

除非你指的是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不仅推荐，反而是CSS2标准按照W3C的一部分。

安吉丽娜

来源

2009-01-02 11:56:00

第二行的链接'正常化浏览器变化'被破坏。 – akash 2013-09-17 06:10:47

你变得有点过分强调我认为:)

退房these links，特别是9.4，9.5和10.3。和ctrl -f“inline-block”

来源

2009-01-02 11:07:45 annakata

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

不要以为像素完美的，不用担心陈述的细节，遵循的标准，让浏览器&其用户定义样式...

（只要它真的那么直向前在“非官方”现实世界）

来源

2009-01-02 11:53:31 bochgoch

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

补充：我foudn这里一些有趣的事情：http://www.webmasterworld.com/css/3811603.htm

我建议检查的建议，更多的技术explanantion的差异，但简单地说，花车的行为CSS2（1998年）和CSS2之间变化.1（2005年的几个月，然后是2007年）。根据css2，必须在浮点上设置宽度，而在ff3中看到的“缩小包装”为css2.1。这意味着在Jul＃/ 2007浏览器符合与他们的制造时间相关的建议时，他们将div＃容器扩展到整个视口宽度。（这不能解释Opera，但它总是做了它自己的事情。）

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

还有其他意见吗？

来源

2009-01-02 12:35:48 user50855

它将“收缩包装”，这是行为预期和定义在我发布的链接 – annakata 2009-01-02 12:51:48

我知道唯一的浏览器坚持与CSS 2.0的行为（全宽，非收缩包装）是IE5/Mac。今天不值得担心，它的旧布局引擎（塔斯曼）几乎肯定会有比浮游物更大的渲染问题。 – bobince 2009-01-02 12:54:55

（假设如果我理解你的问题）

在你不需要设置宽度的列表项大多数情况下。但是（是的，有，但这里）如果你有显示的链接：块（让说你想用推拉门），你必须做一个小窍门：

的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不是LIST元素;）通过这种方式，您可以为IE6设置“最小宽度”，并且不会出现任何其他问题。

来源

2009-01-02 13:26:54

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

回答

相关问题