我想创建一个盒子形状，但遇到了麻烦。
我希望框具有背景色，然后框内具有不同的颜色。
然后，该框将具有使用ul和li的项目列表，并且每个列表项目将具有白色背景，并且该列表项目的背景颜色在整个内部框的整个范围内都过于伸展。
此外，列表项之间的间距应为1 px，以便内部框颜色的背景色可见。

这是我正在尝试做的一个粗略的草图：

http://i38.tinypic.com/2nalnrl.png

解决方案

因此，如果我们有资料来源：

<div class="panel">
  <div>Some other stuff</div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

我们可以使用CSS：

div.panel { background-color: #A74; border: solid 0.5em #520; width: 10em; 
            border-width: 0.75em 0.25em 0.75em 0.25em; }
div.panel div { padding: 2px; height: 4em; }
div.panel ul li { display: block; background-color: white; 
                      margin: 2px; padding: 1px 4px 1px 4px; }
div.panel ul { margin: 0; padding-left: 0; }

为了使CSS正常工作(尤其是在Internet Explorer上)，请确保文档中有适当的DOCTYPE定义。有关列表，请参见w3c推荐的doctype。

也许这两个会有所帮助：

• 列表式
• CssPlay菜单

我们可以使用以下CSS非常干净地执行此操作：

.box {
        width: 100px;
        border: solid #884400;
        border-width: 8px 3px 8px 3px;
        background-color: #ccaa77;
}

.box ul {
        margin: 0px;
        padding: 0px;
        padding-top: 50px; /* presuming the non-list header space at the top of
                              your box is desirable */
}

.box ul li {
        margin: 0px 2px 2px 2px; /* reduce to 1px if you find the separation
                                    sufficiently visible */
        background-color: #ffffff;
        list-style-type: none;
        padding-left: 2px;
}

和这个HTML：

<div class="box">
  <ul>
    <li>Lorem</li>
    <li>Ipsum</li>
   </ul>
</div>

演示

HTML：

<div id="content">
        <a><div class="title">Title</div>Text</a>
        <ul>
            <li>Text</li>
            <li>More Text...</li>
        </ul>
    </div>

CSS：

#content{
            text-align:left;
            width:200px;
            background:#e0c784;
            border-top:solid 10px #7f4200;
            border-bottom:solid 10px #7f4200;
            border-right:solid 5px #7f4200;
            border-left:solid 5px #7f4200;
        }
        #content a{
            margin-left:20px;
        }

        #content ul{
            list-style-type:none;
            margin-bottom:0px;
        }
        #content ul li{
            padding-left:20px;
            margin:0px 0px 1px -40px;
            text-align:left;
            width:180px;
            list-style-type:none;
            background-color:white;
        }
        #content .title{
            text-align:center;
            font-weight:bolder;
            text-align:center;
            font-size:20px;
            border-bottom:solid 2px #ffcc99;
            background:#996633;
            color:#ffffff;
            margin-bottom:20px;
        }

希望对我们有所帮助。...我还为它添加了标题，如果我们不喜欢它，则将其删除...