Question

我正在练习基本的HTML编程，并在两个标题之间的代码中添加了一个列表对象。当我查看列表background时，我发现它一直延伸到页面的一侧。关于这一点，我想知道如何限制背景的width，以便在覆盖li元素之后结束（也很好奇如何让它向下伸展 - 也许我需要另一个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>

Answer 1

没有size属性，认为background-size存在（虽然你不需要这个，因为它只是background-color）
您padding=应为padding:
您可以使用border shortand
要包含背景，您需要在max-width + ul

display:inline-block

（额外）添加box-sizing:border-box它将使border

padding

width

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用

.liststyle {    
    display:inline-block;
    width:500px;

如果您保留宽度参数，则它适合内容。

在项目之间添加空间，使背景不水平拉伸

2 个答案: