2

Web ページに「ワークフロー」バーを作成しようとしています。

ワークフロー内のアイテムは、長さが異なる場合があります。

画面の幅を埋めるのに十分なアイテムがある可能性があるため、フローを次の行に折り返す必要があります。

これを行うために、左フローティング div を使用しています。

ただし、divには適切な量の画面幅をとってもらいたいです。

1 つの行に 3 つのアイテムしか収まらない場合は、個々のアイテムの幅を考慮して、それらのアイテムが行に均等に収まるようにします。

現時点で取得できるのは、行の最後の div が残りのスペースを埋めることだけです。これは、多くの場合、アイテムがすべて左揃えであることを意味します。たとえば、次のようなレイアウトを取得できます。

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

しかし、私は実際には次のようにしたいと思っています:

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

私の言いたいことがわかるなら。

これには、フローティング div ではなくテーブルを使用する必要がありますか?

4

6 に答える 6

1

おそらく、周囲のマークアップを見て、どの要素が配置されているかを理解することができます。周囲のdivを試してみることができますmargin: 0 auto;

おそらく、レベルごとに周囲の div が必要になるでしょう。

于 2008-11-28T15:44:22.490 に答える
1

他のいくつかのポインター。空の li タグは使用しないでください。これは意味的に正しくありません。また、理想的な世界では、id 属性にレイアウト名を付けるべきではありません。

個人的には、最初の画像を ul に配置し、最後の画像を最後の li に配置します。

于 2008-11-28T20:52:51.790 に答える
0

できないと言うのは嫌いですが、各ナビゲーション レベルの周囲の要素について @johnners に同意する必要があると思います。テーブル レイアウト CSS を使用する場合でも、左右の間隔を正しくするために、「行」ごとに何らかの要素を囲む必要があります。

于 2008-12-09T09:51:51.443 に答える
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 に答える