html - - 转移到布局中的新行

Question

我对每个商店元素使用 <li> 来显示按钮。但是每个 < li > 都从新行开始，所以我使用 float: left 来避免这种情况。

html:

<div id="main" >    
    <li><div id="block"><img src="blabla"></div></li>
    <li><div id="block"><img src="blabla"></div></li>
    <li><div id="block"><img src="blabla"></div></li>
    <li><div id="block"><img src="blabla"></div></li>
    <li><div id="block"><img src="blabla"></div></li>
</div>

CSS：

#main{
    margin: 0px auto;
    width:940px;
    }


#block {
    height:286px;
    width:312px;
    white-space: nowrap;
    vertical-align:middle;
    display:table-cell;
    overflow: hidden;
    border-collapse: collapse;
    }

li {
        list-style-type:none;
        vertical-align:top;
        float:left;
        white-space: nowrap;
        width:313px;
        }

但

我有

我需要：

Answer 1

给出#main overflow:auto 并将您的 LI 元素包含在 UL 标记中。

此外，您多次使用相同的 ID，这是不应该的。如果你想像这样使用它，你应该使用一个类而不是一个 ID。ID 是一个独特的标签，每个页面只能使用一次。

Answer 2

首先尝试使您的代码验证。您的 html 代码根本无效。放置所有<li>内部<ul>...</ul>标签。不要使用same id for multiple times。你可以使用class instead of that at multiple of times.