我正在练习基本的 HTML 编程,并在两个标题之间的代码中添加了一个列表对象。当我查看列表 background
时,我看到它一直延伸到页面的一侧。关于这个我想知道如何限制背景的 width
以便它在覆盖 li
元素之后结束(也很好奇如何让它向下拉伸(stretch) - 也许我需要另一个div
?)
还想在 li
元素之间添加一些间距,如我有一本书中所示。我已按照说明添加了 liststyle li {}
,但 ul
框没有响应。对于上述问题,它也不响应 side/background-size
属性。
我怎样才能让这个列表框工作?
部分HTML代码:
.liststyle { /* class */
list-style: square; /* circle / lower-roman */
padding : 15px; /*spacing between border and element*/
margin : 20px; /*spacing outside border*/
background: #66ccff; /*background box colour */
color: #ff0000; /*text color */
list-style-position: inside; /*get bullets inside background box*/
border-style: double;
border-width: 5px;
border-color: #600;
size: 100px 100px; /* background stretches horizontally to side of page*/
}
.liststyle li{ /*trying to get spacing between list items - will not work*/
padding-bottom = 100px;
}
<h1>National Geographic</h1>
<h2>How a Remote Peak in Myanmar Nearly Broke an Elite Team of Climbers</h2>
<ul class="liststyle">
<li>the beggining</li>
<li>reaching the rampart</li>
<li>regrouping</li>
<li>freezing cold</li>
</ul>
<h4>On one of mountaineering’s most dangerous journeys,
group was pushed to the limit by physical and mental challenges.</h4>
最佳答案
- 没有
size
属性,认为background-size
存在(尽管您不需要它,因为它只是一个background-color
) - 你有
padding=
应该是padding:
- 你可以使用
边框
shortand - 要包含背景,您需要在
ul
+display:inline-block
中使用max-width
- (额外)添加
box-sizing:border-box
它将使border
+padding
成为计算的一部分宽度
.liststyle {
/* class */
list-style: square;
/* circle / lower-roman */
padding: 15px;
/*spacing between border and element*/
margin: 20px;
/*spacing outside border*/
background: #6cf;
/*background box colour */
color: #ff0000;
/*text color */
list-style-position: inside;
/*get bullets inside background box*/
border: 6px solid #600;
max-width: 300px;
display: inline-block;
box-sizing:border-box
}
.liststyle li {
/*trying to get spacing between list items - will not work*/
padding-bottom:100px;
}
<ul class="liststyle">
<li>the beggining</li>
<li>reaching the rampart</li>
<li>regrouping</li>
<li>freezing cold</li>
</ul>
<h4>On one of mountaineering’s most dangerous journeys,
group was pushed to the limit by physical and mental challenges.</h4>
关于html - 在元素之间添加空间,使背景不水平拉伸(stretch),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38285556/