Question

我得到了多余的上边距空间

我试图删除在ol之前打败我需要的li的ul，导致没有li圆。只有圆的开头上方的多余空格以及数字1和文本。

我也使用了这个

.collapsible {background-color: #353D30;color:#CCC;text-shadow: 0px 0px yellow;cursor: pointer;padding: 1px;width: 100%;border: none;
  text-align: left;outline: none;font-size: 17px;font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";top:0px;left:0px;letter-spacing: 1px;font-weight:500;z index: 234;
  min-height:1px;}.active, .collapsible:hover { background-color: #063;}
.content { padding-right: 0px;padding-left: 0px; display: none; overflow: hidden;background-color:  #353D30; top:0px; left:0px; min-height:1px;    
  z index: 234;}.collapsible:after { content: '\002B'; color: #FF0;  font-weight: 500;  float: left;  margin-left: 10px;}.active:after {
  content: "\2212";

我还有其他可折叠的设备，它们没有多余的空间，并且可以100％工作。仅当我在ol前面添加ul和li时才会发生

<button class="collapsible">Authority of the Board of Directors</button>
<div class="content"><summary><ul><li><ol><li><h2>"This"</h2></li><ul type="a">
<li><h2>"manage"</h2></li><li><h2>"consider"</h2></li><li><h2>"conduct"</h2></li>
<li><h2>"determine"</h2></li><li><h2>"proceed"</h2></li>
<li><h2>"appoint"</h2></li></ul><li><h2>"The "</h2></li><li><h2>"The "</h2></li>
<li><h2>"This"</h2></li></ol></li></ul>  
</summary></div>

Answer 1

仅举一个例子，您可以使用padding-top: 20px;来使元素类在css padding上阅读更多内容

请同时发布您的代码，因为我可以看到更多详细信息。

为什么不简单地将HTML更改为此？

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
	#textblock27 {
			text-shadow: 0px 0px #FF0;
			font-size: 17px;
			color:#000;
			font-weight:500;
	padding-right: 15px;
	padding-left: 15px;
	background:#9F0;
	letter-spacing: 1px;
		border-style:solid;
	border-width:1px 1px 1px 1px;
	border-color:#353D30;
	text-align:left;
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";		
}	
	.collapsible {
  background-color: #353D30;
color:#CCC;
text-shadow: 0px 0px yellow;
  cursor: pointer;
  padding: 1px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
    font-size: 17px;
  font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
  top:0px;
  left:0px;
  letter-spacing: 1px;
  font-weight:500;
  z index: 234;
  min-height:1px;
  
}

.active, .collapsible:hover {
  background-color: #063;
}

.content {
  padding-right: 0px;
  padding-left: 0px;
  display: none;
  overflow: hidden;
  background-color:  #353D30;
  top:0px;
  left:0px;
  min-height:1px; 
  z index: 234;
}
.collapsible:after {
  content: '\002B';
  color: #FF0;
  font-weight: 500;
  float: left;
  margin-left: 10px;
}

.active:after {
  content: "\2212";
}


summary {
	background-color:white;
	width:100%;
	text-align:left;
	left:0px;
	top:0px;
		}
</style>
<button class="collapsible">Authority of the Board of Directors</button>
<div class="content"><summary>
<p id="textblock27"style="color:yellow; background-color: white ; font-size:16.5px; border-style:solid;
	border-width:5px 0px 0px 0px;
	border-color:#CCC;"></></p>
 <ul><li><ol><li><h2>"This"</h2></li><ul type="a">
<li><h2>"manage"</h2></li><li><h2>"consider"</h2></li><li><h2>"conduct"</h2></li>
<li><h2>"determine"</h2></li><li><h2>"proceed"</h2></li>
<li><h2>"appoint"</h2></li></ul><li><h2>"The "</h2></li><li><h2>"The "</h2></li>
<li><h2>"This"</h2></li></ol></li></ul> 
<p id="textblock27"style="color:yellow; background-color: white ; font-size:16.5px; border-style:solid;
	border-width:5px 0px 0px 0px;
	border-color:#CCC;"></></p>
</summary></div>
<button class="collapsible">Indemnification of Directors</button>
<div class="content">
<summary>
<p id="textblock27"style="color:yellow; background-color: white ; font-size:16.5px; border-style:solid;
	border-width:5px 0px 0px 0px;
	border-color:#CCC;"></></p>
<ul>
<li><h2>"This Memorandum "</h2></li>
<ul type="a">
<li><h2>"advance"</h2></li>
<li><h2>"indemnify"</h2></li>
<li><h2>"purchase"</h2></li>
</ul></ul>
<p id="textblock27"style="color:yellow; background-color: white ; font-size:16.5px; border-style:solid;
	border-width:0px 0px 5px 0px;
	border-color:#CCC;"></></p>
</summary></div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>

</body>
</html>

如何减少有序列表项之间的空格？

1 个答案: