0

メニュー要素を表示するために、リストと CSS を使用してページにメニュー バーを設定しました。メニュー ボタン (この場合は「ホーム」) の右側に、メニュー バーの幅を終了要素で閉じる前に、ページの幅に拡張したい空のバー要素があります。幅を 100% に設定しようとすると、次の行に分割され、以下に示すようにページの幅全体が埋められます。すべてを同じ行に保ち、空の要素の幅を動的にする方法について何か考えはありますか?

HTML:

<div>
   <li class="menu-home">
      <a href="#">&nbsp;</a>
   </li>
   <li class="menu-bar"> </li>
   <li class="menu-bar-right"> </li>
</div>

CSS:

li.menu-bar {
   position: static;
   float: left;
   list-style-type: none;
   background-image: url('top.png');
   border-style: none;
   border-width: 0px;
   padding: 0px;
   height: 34px;
   width: 100%;
}

問題：

ここに画像の説明を入力

4

2 に答える 2

0

LI をfloatにそれぞれ送信できます。マークアップの の下に表示されるものはすべて、中央の領域にあふれます。'home' and 'right'left and rightLIshome and right LIs

http://jsfiddle.net/gwmFk/1/

于 2012-07-28T17:56:49.467 に答える
0

ホームボタンの幅がわかっている場合display: inline-block;は、バーの残りの部分で使用し、その幅に等しい右マージンを与えることができます (パディングやスペースなどを加えたもの)。

ボタンの幅がわかりますか？

于 2012-07-28T19:22:06.827 に答える