1

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

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

我没有注意到两个内联元素都被强制渲染为块元素而不被浮动或宽度设置，或者列表项示例有任何问题。无论当前版本是什么，它都可以在 IE7、FF3、Opera 9 和 Safari 中正常工作。问题仍然存在：我是否应该担心这些 inline-to-block 元素或真正的块元素浮动但没有设置宽度，或者只是让所有内容保持原样？我是否遗漏了某些东西，或者它只是您根本不应该期望得到正确的那些东西之一？

4

5 回答 5

1

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

除非您指的是Internet Explorer 的盒子模型怪癖，否则您不应该担心任何意外扩展或收缩。只要您注意对浏览器变体进行规范化，就可以了。如果您在设计荣耀的过程中遇到意外和不需要的副作用，请调试它，因为这是您应对的程序员错误。CSS 可能很古怪，但对于大多数主流浏览器来说，这在 95% 的情况下都不是合适的借口。剩下的 5% 我们不谈。

我是这样理解你的问题的：

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

听起来您正在考虑固定宽度设计，而真正适合您目的的是流体宽度设计。这意味着您创建的设计具有“弹性”，并且可以相对于用户浏览器窗口的大小进行扩展和收缩。如果您在创建设计时预期在每个元素上设置像素宽度，您可能会找到一种优雅的方式来维护流体宽度的标题和导航，但具有固定宽度的主要内容区域。你可以找到一个快乐的媒介，而不需要完全重新设计。本演练可能就是您要查找的内容。如果您不熟悉行话并想仔细了解这些想法，可以在此处找到对固定宽度和流体宽度术语的良好解释。

还有一个用于道路：

不仅建议在所有浮动元素上设置宽度，而且是 W3C 的 CSS2 标准的一部分。

  • 安吉丽娜
于 2009-01-02T11:56:00.373 回答
0

我想你让自己有点压力过大了:)

查看这些 链接，尤其是 9.4、9.5 和 10.3。和 ctrl-f "inline-block"

于 2009-01-02T11:07:45.533 回答
0

如果我们采用您提到的“官方”路线，那么生活很容易，因为我们无需担心这些元素的宽度、高度等。

不要认为像素完美，不要担心呈现的细节，遵循标准，允许浏览器及其用户定义样式......

（如果在“非官方”现实世界中真的那么直截了当）

于 2009-01-02T11:53:31.283 回答
0

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

补充：我在这里发现了一些有趣的东西：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。

还有评论吗？

于 2009-01-02T12:35:48.763 回答
0

（假设我理解你的问题）

在大多数情况下，您不需要在列表项上设置宽度。但是（是的，这里有一个但是）如果你有一个与 display:block 的链接（假设你想使用滑动门）你必须做一个小技巧：

的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，并且不会有任何其他问题。

于 2009-01-02T13:26:54.387 回答