<li> - 转移到布局中的新行</li>

Question

我使用＆lt; li>为每个商店元素显示按钮。 但每个＆lt; 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是一个unqiue标记，每页只能使用一次。

Answer 2

首先尝试让您的代码验证。您的HTML代码根本无效。请将所有<li>内置<ul>...</ul>个代码。 不要使用same id for multiple times。您可以使用class instead of that at multiple of times.