Question

我正在尝试创建一个垂直布局的div列表。以下不起作用。有人可以告诉我如何做到这一点，而无需在列表中的每个div上设置明确的位置？谢谢！

<html>
        <head>
                <style type="text/css">
                        .main {
                                background-color : #FF0000;
                                width : 400px;
                                height : 750px;
                                position : absolute;
                                top : 100px;
                                left : 100px;
                                padding : 8px;
                        }

                        .list {
                                list-style-type : none;
                                list-style-position : inside;
                                display  : inline;
                        }

                        .element {
                                background-color : #00FF00;
                                width : 100%;
                                height : 100;
                                clear : both;
                        }
                </style>
        </head>
        <body>
                <div id="main" class="main">
                                <ul class="list">
                                        <div class="element"/>
                                        <div class="element"/>
                                </ul>
                </div>
        </body>
</html>

Answer 1

<ul>
    <li>
        <div class="element"></div>
    </li>
</ul>

......你需要的是什么？

Answer 2

你可能会丢失列表而只是改为使用div。

<div id="main" class="main">
    <div class="list">
        <div class="element"></div>
    </div>
</div>

Answer 3

div只是一个通用的块级元素。默认情况下，列表项也是块级元素。因此，除非您能够提供有关您要在视觉上实现的内容的更多信息，否则很难理解为什么使用div而不是仅使用list-item。您可以为列表项提供与div相同的样式。只要通过设计现有的结构元素而不添加不必要的DIV，您会感到惊讶。此外，您可以在列表项中包含其他内容，就像在div中一样。

有关管理这些元素的规则的快速资源，我建议使用sitepoint.com的HTML和CSS参考部分：

http://reference.sitepoint.com/html

http://reference.sitepoint.com/css

Newb HTML布局

3 个答案: