logo标签列表

使用CSS创建盒子的问题

css
6
我想创建一个盒子形状，但遇到了困难。 我希望这个盒子有一个背景颜色，并且盒子内部有不同的颜色。
然后，盒子将使用ul和li列出项目，每个列表项都将具有白色背景，列表项的背景颜色也应该延伸到整个内部盒子的距离。 此外，列表项之间应该有1像素的间距，以便内部盒子颜色的背景可见。

这是我尝试做的草图:

5个回答
8
您可以使用以下 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;
}

and this html:

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

示例

（DEMO）
看起来很不错，但出于某种原因，宽度并不是那个容器的100％，实际上由于某种原因非常狭窄，有什么想法吗？ - public static
3

所以如果你有源代码：

<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列表。
为什么要使用子选择器？我不知道有哪种文档类型可以使子选择器（>）在IE6中工作... - Prestaul
好的，既然它们不再需要了，我已经将它们移除了。 - Mike Tunnicliffe
1
<!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>
0
0

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

希望这有所帮助... 我还给它加了一个标题，如果你不喜欢就删掉它...
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接