フローティングdivでスペースを埋める方法

StackOverflow https://stackoverflow.com/questions/326059

  •  11-07-2019
  •  | 
  •  

質問

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

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

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

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

ただし、divには適切な量の画面幅が必要です。

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

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

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

しかし、実際には次のようになります：

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

意味がわかりました。

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

役に立ちましたか？

解決

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

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

他のヒント

おそらく、周囲のマークアップを見て、適切な要素を理解することができます。 margin：0 auto;

で周囲のdivを試すことができます

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

時間を無駄にしないでください。

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

迅速な回答をありがとう。あなたが提案していることを試します。

現在はリストを使用してこれを実行しようとしていますが、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>

li要素をdisplay：inlineに設定し、ulにtext-align：justifyプロパティを指定すると、少なくともFFX3とIE7でそれができます。ただし、背景画像を適用する際にいくつかの問題が発生します。

物事を成し遂げられないと言うのは嫌いですが、各ナビゲーションレベルの周囲の要素について@johnnersに同意する必要があると思います。テーブルレイアウトCSSを使用する場合でも、左右のスペースを正しく取得するには、各「行」に何らかの周囲要素が必要です。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top