2

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

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

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

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

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

如果只有三个项目可以放在一条线上，那么我希望这些项目能够均匀地放在线上，同时考虑到每个项目的宽度。

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

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

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

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

如果你明白我的意思。

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

4

6 回答 6

1

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

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

于 2008-11-28T15:44:22.490 回答
1

只是其他几个指针。你不应该有空的 li 标签，这在语义上是不正确的。同样在理想世界中，您不应该提供 id 属性布局名称。

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

于 2008-11-28T20:52:51.790 回答
0

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

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

于 2008-11-28T15:48:20.780 回答
0

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

我目前正在尝试使用列表来执行此操作，尽管我也无法使用 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>
于 2008-11-28T16:11:35.693 回答
0

将 li 元素设置为 display: inline，并给 ul 一个 text-align: justify 属性将使您部分达到那里（至少在 FFX3 和 IE7 中）。但是，在应用背景图像时确实会带来一些复杂性。

于 2008-11-28T16:28:39.233 回答
0

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

于 2008-12-09T09:51:51.443 回答