Question

我正在尝试更改可扩展部分的标题之间的间距，如here所示。我已经弄清楚了如何更改字体大小，但是当我增加字体大小时，标题开始彼此重叠。我真的很陌生，很抱歉，如果这是一个明显的答案。我正在使用Squarespace作为主机。

这是该部分的HTML：

<span style="cursor:hand; cursor:pointer" onClick="openAll()">[ Open 
All</span> | <span style="cursor:hand; cursor:pointer" 
onClick="closeAll()">Close All ]</span><br /><br />

<div onClick="openClose('a1')" style="cursor:hand; cursor:pointer; 
font-family:verdana,arial,helvetica,sans-serif; font-size:30pt"><b> 
MIDDLE SCHOOL +</b></div>
 <div id="a1" class="texter">
<p>

</p>
Middle School - 6th-8th Grade (11-14 yo)
Being a Middle School student can be hard, fun, quirky and, for some 
reason, no matter how much the culture changes the experience of being 
a Middle School student never changes. If you are in 6th, 7th, or 8th 
Grade in a private, public, or homeschool setting, you have a place 
with us that is specifically geared to and focused on navigating the 
Middle School aged years while trying to grasp the Gospel’s effects on 
that time of life. Join us for any of our regular Middle School events 
and/or our Middle School Sunday Night Fellowship.
<p> 
</p>

   <i><b>Middle School Sunday Night Fellowship (SNF)</b></i>
SNF occurs most Sunday nights during the school year. These nights have 
four elements to them - food, games, worship, and discipleship. Dinner 
is always provided for all students. Middle School SNF runs from 
5:00pm-7:00pm in the Student Ministry Room (110). To find out more 
about SNF, check out the SNF section on the Student Ministry page.

<p>

</p>

<br /><br />
 </div>

这是页面标题HTML：

<script language="JavaScript" type="text/javascript">
<!-- Copyright 2007, Sandeep Gangadharan -->
<!--
if (document.getElementById) {
 document.write('<style type="text/css">.texter {display:none; border- 
  left:white 20px solid; color:#404040; font- 
 family:verdana,arial,helvetica,sans-serif; font-size:9pt} @media print 
{.texter {display:block;}}</style>') }

 var divNum = new Array("a1","a2","a3", "a4", "a5"); 
function openClose(theID) {
 for(var i=0; i < divNum.length; i++) {
  if (divNum[i] == theID) {
   if (document.getElementById(divNum[i]).style.display == "block") { 
document.getElementById(divNum[i]).style.display = "none"     }
    else { document.getElementById(divNum[i]).style.display = "block" }
   }else { document.getElementById(divNum[i]).style.display = "none"; }
 }
}

function openAll() {
 for(var i=0; i < divNum.length; i++) {
   document.getElementById(divNum[i]).style.display = "block";
    }
   }

function closeAll() {
 for(var i=0; i < divNum.length; i++) {
   document.getElementById(divNum[i]).style.display = "none";
 }
}
 // -->
 </script>

Answer 1

将此添加到您的CSS代码

div[onclick^=openClose] {
    margin-bottom:  20px;
}

对于任何具有属性margin-bottom: 20px且其值以onclick开头的div，此代码将给出openClose。

此image可能会进一步解释。

感谢@Yulio Aleman Jimenez

编辑：要将CSS代码添加到您的html中，只需在<head>标记中键入以下CSS代码即可。

<style>
    div[onclick^=openClose] {
        margin-bottom:  20px;
    }
</style>

可扩展文本的标题文本大小

1 个答案: