Question

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

以下是我想要做的草图：

Answer 1

你可以用这个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>

DEMO

Answer 2

所以，如果你有来源：

<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 recommended doctypes。

Answer 3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>Examples of margins, padding, and borders</TITLE>
    <STYLE type="text/css">
      UL { 
        background: yellow; 
        margin: 12px 12px 12px 12px;
        padding: 3px 3px 3px 3px;
                                     /* No borders set */
      }
      LI { 
        color: white;                /* text color is white */ 
        background: blue;            /* Content, padding will be blue */
        margin: 12px 12px 12px 12px;
        padding: 12px 0px 12px 12px; /* Note 0px padding right */
        list-style: none             /* no glyphs before a list item */
                                     /* No borders set */
      }
      LI.withborder {
        border-style: dashed;
        border-width: medium;        /* sets border width on all sides */
        border-color: lime;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>First element of list
      <LI class="withborder">Second element of list is
           a bit longer to illustrate wrapping.
    </UL>
  </BODY>
</HTML>

Answer 4

也许这两个会有所帮助：

Answer 5

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;
        }

希望这有帮助....我还添加了一个标题，如果你不喜欢它只是删除它...

使用CSS创建框的问题

5 个答案:

HTML：

CSS：