0

我正在创建一个带有浮动列表项的缩略图库，我希望以流畅的布局居中。当它是单行时，我可以毫无问题地做到这一点，但是当它溢出时，它们不再居中。纯粹用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

RRcom Rest y 的回答很好，但是如果您需要在 IE7 上使用它，那么display: inline-block将不起作用。

您可以使用此 hack 对 IE7 和现代浏览器获得相同的效果（请参阅“inline-block”之后的额外行）：

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

此 hack 只会被 IE7 解释（带有“*” hack），并且只有在这种情况下才会应用 display: inline 和 zoom: 1 规则。这迫使内联元素具有“布局”。也就是说，您可以分配宽度或高度属性（例如）但在同一行中的内联元素。

这是解释这个黑客的完整文档

于 2012-10-25T04:08:10.523 回答
1

试试这个 css，将 li 从块更改为 inline-block

#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 回答