Question

我正在创建一个人们可以下载和编辑的个人博客，但内容区域始终位于工具栏下的同一位置 - 即使我将左侧设置为195px。对不起，如果这有点混乱，难以阅读，但这是我的代码：

<html>
<head>
<title>[Your Name]'s Blog</title>
<style type="text/css">
div.selector
{
  position: fixed;
  top: 0;
  left: 0;
  width: 189px;
  height: 100%;
  background: #0000FF;
}
</style>
<style type="text/css">
div.scroll
{
top:10;
left:195;
border:double;
border-color:#000000;
background-color:#FFFFFF;
width:500px;
height:900px;
overflow-y:scroll;
overflow-x:hidden;
}
</style>
<style type="text/css">
div.flow 
{
  display:inline;
}
</style>
<script language="JavaScript">
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
</script>
</head>
<body>
<div class="selector">
<div>
<div>
<button onclick ="javascript:ShowHide('Me')" href="javascript:;" >Show/Hide Image</button>

<div class="mid" id="Me" style="DISPLAY: none" >
<img src="[Your Image Link]" alt="[Your Name]"/><br/>
</div>
</div>
<div>
<form method="get" action="http://www.youtube.com/results?search_query=" target="new">
<input type="text"   name="q" size="25"
maxlength="255" value="Search youtube" onfocus="this.value==this.defaultValue?this.value='':null"/>
<input type="submit" value="Search Youtube" />
</form>
</div>
<form method="get" action="http://www.google.com/search">
<div>
<input type="text"   name="q" size="25"
 maxlength="255" value="Google Search" onfocus="this.value==this.defaultValue?this.value='':null"/>
<input type="submit" value="Google Search" />
</div>
</form>
</div>
</div>



<div class="scroll">
<h1><center>[Your Name]'s Blog</center></h1>
<p>Note: Paragraphs are in between &lt;p&gt; and &lt;/p&gt;. Subheadings are in between &lt;h2&gt; and &lt;/h2&gt;.</p>
</div>
</body>
</html>

Answer 1

我看到两个问题。首先，如果取决于您的doctype，不包括单位将忽略数字：

top:10;
left:195;

应该是：

top:10px;
left:195px;

此外，top和left仅适用于position绝对，固定或相对的元素。我没有看到任何迹象表明这个元素。

Answer 2

顶部和左侧声明不会执行任何操作，因为它们仅在项目位于“静态”以外的位置时起作用 - “相对”或“绝对”。

您需要添加

margin-left: 195px;

或者

position: relative;

此外，您不需要将每个声明包装在自己单独的<style>标记中。

为什么即使我在css中设置样式，我的内容区域也不会移动？

2 个答案: