Question

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

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

可能有足够的项目来填充屏幕的宽度，因此需要将流量包裹到下一行。

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

但是，我希望div能够获得适当数量的屏幕宽度。

如果一条线上只能放三个物品，那么我希望这些物品能够均匀地放在线上，并考虑每个物品的宽度。

目前我所能得到的只是在一条线上的最后一个div来填补剩余空间，这通常意味着我的所有物品都保持对齐，例如我可以得到这样的布局：

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

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

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

如果你明白我的意思。

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

Answer 1

可能会看到周围的标记，以了解您所拥有的元素。您可以尝试使用margin: 0 auto;

创建一个周围的div

你可能需要为每个级别提供一个周围的div。

Answer 2

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

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

Answer 3

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

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

Answer 4

感谢您的快速回复。我会尝试你的建议。

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

我试过拉一些我的JSP的HTML，试图用它来演示我的目标。

跨度有一类“导航”，基本上在文本周围绘制背景图像，使其看起来像一个按钮，以及设置边距/填充/等。我省略了与按钮绘图直接相关的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>

Answer 5

将li元素设置为display：inline，并给ul一个text-align：justify属性将使你在那里（至少在FFX3和IE7中）。但是，在应用背景图像时确实会引起一些复杂化。

Answer 6

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

如何使浮动div填补空间

6 个答案: