如何让浮动 div 填满空间答案

【问题标题】：How to make floating divs fill up space如何让浮动 div 填满空间
【发布时间】：2015-04-15 05:49:12
【问题描述】：

我正在尝试在网页上创建一个“工作流程”栏。

工作流程中的项目可能有不同的长度。

可能有足够的项目来填满屏幕的宽度，因此流程需要换行到下一行。

我正在使用左浮动 div 来执行此操作。

但是，我希望 div 采用适当的屏幕宽度。

如果一行中只能容纳三个项目，那么考虑到每个项目的宽度，我希望这些项目能够均匀地排列在一行中。

目前我所能得到的只是一行上的最后一个 div 来填充剩余空间，这通常意味着我的项目都是左对齐的，例如我可以得到这样的布局：

AAAA -> BBBBB -> CCCCCCCCCCCCCCCCCCCC -> DD -> EEE -> FFFFF -> GGGG -> HHHHH

但我实际上希望它看起来像这样：

AAAA -> BBBBB -> CCCCCCCCCCCCCCCCCCCC -> DD -> EEE -> FFFFF -> GGGG -> HHHHH

如果你明白我的意思。

我是否需要为此使用表格而不是浮动 div？

【问题讨论】：

我认为您的图表没有帮助，看起来您希望事物居中...但实际上您希望所有项目都填满页面的宽度...

标签： html css css-float

【解决方案1】：

只是其他几个指针。你不应该有空的 li 标签，这在语义上是不正确的。同样在理想世界中，您应该not give id attributes layout names。

我个人会将起始图像放在 ul 上，然后将结束图像放在最后一个 li 上。

【讨论】：

【解决方案2】：

可能可以通过查看周围的标记来了解您有哪些元素。您可以尝试使用 margin: 0 auto;

环绕 div

您可能需要为每个级别设置一个周围的 div。

【讨论】：

【解决方案3】：

不要浪费你的时间去这里：

http://www.cssmenubuilder.com/build-breadcrumb-menu

【讨论】：

【解决方案4】：

感谢您的及时回复。我会试试你的建议。

我目前正在尝试使用列表来执行此操作，尽管我也无法使用 div。

我已尝试提取我的 JSP 的一些 HTML，以尝试并展示我在这方面的能力。

spans 有一个“导航”类，它基本上在文本周围绘制背景图像，使其看起来像一个按钮，以及设置边距/填充/等。我省略了与按钮绘制直接相关的 CSS，因为这是我们系统中用于绘制按钮的标准框架内容。我已经包含了我正在使用的与工作流直接相关的 CSS。

我试图在第一个按钮之前绘制一个起始图像，然后在每个按钮后面绘制背景图像，以便在每个按钮之间画一条线来表示流程。然后我在流程结束时得到了一个结束图像。

<html>
<body>

<STYLE>
#nav, #nav ul {
    list-style: none;
    margin: 0px;
    width: 700px;
}

#nav li {
    list-style: none;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    width: auto;
    background-image: url(/lookandfeel/images/navMenuDiv.gif);
    background-repeat: repeat-x;
}

li#ending {
    background-image: url(/lookandfeel/images/navMenuRight.gif);
    background-repeat: no-repeat;
}

li#start {
    background-image: url(/lookandfeel/images/navMenuLeft.gif);
    background-repeat: no-repeat;
}

.navigation a {
  background-image: url(/pdr/images/navigation.gif);
}
</STYLE>

<ul id="nav" style="width: 100%;border: 1px solid">
  <li id="start" />
  <LI >
    <SPAN class="navigation" >AAAAAAAAAA</SPAN>
  </li>
  <LI >
     <SPAN class=navigation >BBBB</SPAN>
  </li>
  <LI >
    <SPAN class=navigation>CCCCCCCCCCCCCCCCC</SPAN>
  </li>
  <LI>
    <SPAN class=navigation>DDDDDDDDD</SPAN>
  </li>
  <LI>
    <SPAN class=navigation>EEEEEEEE</SPAN>
  </li>
  <LI>
    <SPAN class=navigation>FFFFFFFFFFFFFF</SPAN>
  </li>
  <li>
    <SPAN class=navigation>GGGGGGGGGGGGGGGGGGGGGGGGGGGGG</SPAN
  </LI>
  <li id="ending" />
  </ul>
</body>
</html>

【讨论】：

【解决方案5】：

将 li 元素设置为 display: inline，并给 ul 一个 text-align: justify 属性会让你走得更远（至少在 FFX3 和 IE7 中）。但是，在应用背景图像时确实会带来一些复杂性。

【讨论】：

【解决方案6】：

尽管我不喜欢说事情无法完成，但我认为我必须同意@johnners 对每个导航级别的周围元素的看法。即使您要使用表格布局 CSS，您也需要为每个“行”设置某种环绕元素，以使左右间距正确。

【讨论】：