I want to create a box shape and I am having trouble. I want the box to have a background color, and then different color inside the box.
The box will then have a list of items using ul and li, and each list item will have a background of white, and the list item's background color is too stretch the entire distance of the inner box. Also, the list items should have a 1 px spacing between each one, so that the background color of the inside box color is visible.
我想创建一个盒子形状,我遇到了麻烦。我希望盒子有背景颜色,然后盒子里面有不同的颜色。然后该框将具有使用ul和li的项目列表,并且每个列表项目将具有白色背景,并且列表项目的背景颜色过于拉伸内部框的整个距离。此外,列表项之间的间距应为1 px,以便可以看到内部框颜色的背景颜色。
Here is a rough sketch of what I am trying to do:
这是我想要做的粗略草图:
http://i38.tinypic.com/2nalnrl.png
5 个解决方案
#1
8
You can do this pretty cleanly with this css:
你可以用这个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:
这个HTML:
<div class="box">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
</ul>
</div>
#2
3
So if you have source:
所以如果你有来源:
<div class="panel">
<div>Some other stuff</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
You can use CSS:
你可以使用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; }
To get the CSS to work properly (particularly on Internet Explorer), make sure you have an appropriate DOCTYPE definition in your document. See w3c recommended doctypes for a list.
要使CSS正常工作(特别是在Internet Explorer上),请确保在文档中具有适当的DOCTYPE定义。有关列表,请参阅w3c推荐的doctypes。
#3
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>
#5
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;
}
Hope this helps.... I also added a title to it, if you dont like it just delete it...
希望这有帮助....我还添加了一个标题,如果你不喜欢它只是删除它...
#1
8
You can do this pretty cleanly with this css:
你可以用这个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:
这个HTML:
<div class="box">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
</ul>
</div>
#2
3
So if you have source:
所以如果你有来源:
<div class="panel">
<div>Some other stuff</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
You can use CSS:
你可以使用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; }
To get the CSS to work properly (particularly on Internet Explorer), make sure you have an appropriate DOCTYPE definition in your document. See w3c recommended doctypes for a list.
要使CSS正常工作(特别是在Internet Explorer上),请确保在文档中具有适当的DOCTYPE定义。有关列表,请参阅w3c推荐的doctypes。
#3
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>
#4
#5
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;
}
Hope this helps.... I also added a title to it, if you dont like it just delete it...
希望这有帮助....我还添加了一个标题,如果你不喜欢它只是删除它...