從Javascript代碼中擺脫空白空間的麻煩

我很難在我的教授的網站上使用JavaScript獲取div，以便與網站的其他部分保持良好的空間。我試着調整邊距和其他Stackoverflow.com線程上的一些建議（例如CSS: Center block but left align contents），但似乎沒有任何工作。從Javascript代碼中擺脫空白空間的麻煩

基本上我試圖讓鏈接進一步在頁面上像其他網頁。

我所擁有的是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<link rel="stylesheet" type="text/css" href="ecl.css" /> 
<title>Sarah Lawrence College: Research</title> 
<script type="text/javascript"> 
function hideshow(which){ 
if (!document.getElementById) 
return 
if (which.style.display=="block") 
which.style.display="none" 
else 
which.style.display="block" 
} 
</script> 
</head> 

<body> 
<div id="header"><img src="images/celab-header-reduced.jpg" /></div> 
<div id="navigation"> 
    <ul> 
    <li><a href="index.html">About</a></li> 
    <li><a href="research.html">Research</a></li> 
    <li><a href="teaching.html">Teaching</a></li> 
    <li><a href="publications.html">Publications</a></li> 
    <li><a href="members.html">Lab Members</a></li> 
    <li><a href="contact.html">Contact</a></li> 
    </ul> 
</div> 
    <div id="researchcontent"> 
    <ul> 
     <li> 
     <div class="showhide"><a href="javascript:hideshow(document.getElementById('ptsd'))"> 
      <h1>Posttraumatic Stress Disorder (PTSD)</h1> 
      </a></div> 
     <div id="ptsd">We are currently a series of studies using cognitive and brain imaging techniques to examine the impact of combat trauma on memory and emotion. These studies focus on how perceptions of one’s self impact cognitive, behavioral, and biological processes associated with recovery from combat trauma.</div> 
     </li>

如此類推......結尾。

</li> 
    </ul> 
    </p> 
    </div> 
</body> 
</html>

對於CSS我：

/* Structure */ 

div#content { 
    width:600px; 
    float:center; 
    margin:auto; 
} 


div#navigation { 
    float:left; 
    margin:auto auto; 
} 

div#footer { 
    clear:both; 
    text-align:center; 
    font-size:14px; 
    font-family:Times New Roman, Times, serif; 
} 

div#researchcontent { 
    width:600px; 
    float:center; 
    margin:auto; 
} 

/* Research */ 

div.showhide { 
    clear:both; 
    margin:0px; 
} 

div#ptsd { 
    display:none; 
} 

div#memory { 
    display:none; 
} 

div#futureself { 
    display:none; 
} 

div#socialremembering { 
    display:none; 
} 

div#trauma { 
    display:none; 
}

來源

2015-05-01 NSSR

也許首先通過https://validator.w3.org/發送你的頁面？ – max

聽起來像你有其他網頁有所需的格式。如果你有一個「已知的好」頁面，我建議你比較兩頁之間的差異和標記和CSS，並從那裏進行更正。 –

也許試試Firebug ..？ –

添加以下CSS到您現有的樣式表的底部。這些樣式將使您很容易看到造成不必要空間的原因。

* { 
    background: #000 !important; 
    color: #0f0 !important; 
    outline: solid #f00 1px !important; 
}

然後，使用您的Web瀏覽器的開發工具來相應地調整樣式。

來源

2015-05-02 02:22:03 nickfogle

從Javascript代碼中擺脫空白空間的麻煩

回答

相關問題