0

流動的なレイアウトの中央に配置したいフローティング リスト アイテムを含むサムネイル ギャラリーを作成しています。1行の場合は問題なくこれを行うことができますが、オーバーフローすると中央に配置されなくなります。これは純粋にcssでは不可能ですか? 次に例を示します。

<style>
#centeredmenu {
   float:left;
   width:100%;
   position:relative;
}
#centeredmenu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
#centeredmenu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
   width: 200px;
   background-color:black;
   border:1px solid white;
}
</style>
<div id="centeredmenu">
   <ul>
      <li>/</li>
      <li>/</li>
      <li>/</li>
      <li>/</li>
      <li>/</li>
      <li>/</li>
      <li>/</li>
      <li>/</li>
   </ul>
</div>

純粋にcssでできない場合、jsでできる方法を教えてもらえますか?

4

2 に答える 2

1

このCSSを試して、liをブロックからインラインブロックに変更してください

#centeredmenu {

}
#centeredmenu ul {
   list-style:none;
   margin:0;
   padding:0;
   text-align:center;
}
#centeredmenu ul li {
   display:inline-block;
   margin:0;
   padding:0;
   width: 200px;
   background-color:black;
   border:1px solid white;
}
于 2012-10-25T03:44:35.700 に答える
1

RRcom Rest y の回答は適切ですが、これが IE7 で動作する必要がある場合、display: inline-blockは機能しません。

このハックを使用すると、IE7 と最新のブラウザーで同じ効果を得ることができます (「インライン ブロック」の後の余分な行を参照してください)。

#centeredmenu ul li {
   display:inline-block;
   *display: inline;
   *zoom: 1;
   margin:0;
   padding:0;
   width: 200px;
   background-color:black;
   border:1px solid white;
}

このハックは IE7 (「*」ハックを使用) によってのみ解釈され、この場合にのみ display: inline および zoom: 1 ルールが適用されます。これにより、インライン要素に「レイアウト」が強制されます。つまり、幅または高さのプロパティ (たとえば) を割り当てることができるが、同じ行にあるインライン要素です。

これは、このハックを説明する完全なドキュメントです

于 2012-10-25T04:08:10.523 に答える