3

ul、li 要素を含む CSS で水平メニューを作成しようとしています。目標は、次のことを達成することです。メニュー オプションが長すぎる場合は常に、テキストが 2 行目に移動し、垂直方向と水平方向に整列されます。

私はなんとかそれを機能させましたが、オプションが2行の場合、幅として自動的にmax-widthパラメーターを取得し、オプションの実際の幅に設定されません。ただし、オプションが 1 行の場合、実際の幅に設定されます。max-width は、私が達成しようとしているものに対して間違ったパラメーターですか? 私はli 要素をその内容と同じ幅にしたいと思っています。

HTML:

<ul class="trials">
   <li><span><a href="#">kitchen furniture</a></span></li>
   <li><span><a href="#">wardrobes & cabinets</a></span></li>
   <li><span><a href="#">hallway furniture</a></span></li>
   <li><span><a href="#">materials</a></span></li>
</ul>

CSS:

.trials {
     margin: 0;
     padding: 0;
     text-transform: uppercase;
     float: right;
}
.trials li {
     display: inline-block;
     list-style: none;
     margin-left: 10px;
}
.trials li {
     max-width: 130px; 
     line-height: 40px;
     height: 40px;
     border: 1px blue solid;        
}
.trials li span {
     display: -moz-inline-box; /* FF2 or lower */
     display: inline-block; /* FF3, Opera, Safari */
     line-height: normal;
     vertical-align: middle;
     text-align: center;
}
.trials li span { 
     *display  : inline; /* haslayout for IE6/7 */
}

これがフィドルです：http://jsfiddle.net/so_artistic/ecCM4/

助けていただければ幸いです。

4

1 に答える 1

0

イディジャラ、

ここには 2 つのオプションがあります。

私の最初の解決策は、を追加width: 130pxして削除することでしたmax-width: 130px。これにより、2 行の項目のテキストが折り返されるliだけでなく、すべて同じサイズになります。残念ながら、a を設定してテキストを強制的に 2 行に折り返すことはできませんが、max-widthそのテキストがボックスのサイズを変更することも期待できます。-jsFiddle

テキストにa を追加するだけ<br/>で、手動で改行することもできます。これにより、ボタンをボタン内のテキストのサイズに合わせることができます。-jsFiddle

実際には、各要素が よりも大きいかどうかを検出130pxし、幅を単語の幅に設定したまま、javascript でサイズを変更する可能性のある JavaScript を含むオプションが他にもあります。このようなことは可能ですが、必ずしも実用的ではありません。

spanまた、コードからすべてを削除しました。spanとはどちらも最初aは要素であるため、各個人に対してグループ化要素の使用が冗長になります。コードでより多くのマークアップ/より複雑なことが行われている場合を除き、タグに追加する理由はありません。inlinespanlispana

これが役立つことを願っています。

于 2013-02-26T15:44:23.517 に答える