Question

大家好我bin工作在一个lil网站，但我的表格不会移动无论我做什么它似乎卡住我尝试浮动位置保证金但它不起作用我无法找到解决方案

我的HTML代码

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>



<!--Title-->
<div id="Title">
     <h1>Magic</h1>
</div>






<!--Navigator-->
<div id="Nav">
	 <form action="skyrim.html">
     <input type="submit" value="Map">
     </form>
	  
	 <form action="races.html">
	 <input type="submit" value="Races">
	 </form>
	  
	 <form action="magic.html">
	 <input type="submit" value="Magic">
	 </form>
	  
	 <form action="Website 1.html">
	 <input type="submit" value="Homepage">
	 </form>
</div>





<!--Section-->
<div id="Sector">
     <h1> Skyrim Magic Categories</h1>
</div>




<!--Magic-->
<div id="Dmagic">
     <img src="Dmagic.png" alt="Dmagic.png" style="width:350px;length:300px;">
</div>




	 
	 
<!--Login Form-->
<div id="Form">
	 <form action="logged.html">
	 Username:<br>
	 <input type="text" name="Dovahkiin">
	 <br>
	 Password:<br>
	 <input type="password" name="Dragonborn">
	 <input type="submit" name="Log in" value="Log in">
	 </form>
</div>
	   
	  


	  
<!--footer-->
<div id="Footer">
     <p>Made by Tommasteragent</p>
</div>
	  
</body>
</html>

我的css代码

<style>
div#Form  {
		color:white;
		position:absolute;
		top:20px;
		right:-150px;
		}
div#Title {
        font-size:30px;
		color:white;
		text-align:center;
		background-color:black;
		padding:5px;
		}
		
div#Nav    {
         font-size:20px;
		 color:black;
		 float:left;
		 background-color:lightgrey;
		 padding:5px;
		 line-height:50px;
		 height:770px;
		 width:100px;
		 }
		 
div#Footer  {
         font-size:20px;
		 color:white;
		 background-color:black;
		 padding:5px;
		 clear:both;
		 text-align:center;
		 }

div#Sector   {
         background-color:white;
		 color:black;
		 float:left;
		 clear:right;
		 width:350;
		 padding:10px;
		 }
div#Dmagic  {
          position:absolute;
		  top:200px;
		  left:70px;
		 }
</style>

已经感谢你的帮助

EDIT 对不起我的问题不清楚问题主要是关于“登录表”“div＃Form” 那个不会移动它的部分需要在右上角，但它不会

我不清楚的借口

Answer 1

你为什么要使用表格？如果你使用<a href="skyrim.html"> skyrim</a>那么风格会更加轻松

Answer 2

我认为你试图将它向侧面移动。然后你要找的属性是“边距”。这会将给定数量的像素添加到元素的任一侧。将“margin”设置为“auto”将使其居中。

//编辑：

请勿使用表单进行导航。用户链接（<a> -element）代替。

Answer 3

我想你想把表单移到文本＆＃39; skyrim魔术类别＆＃39;下面。我已经在你的CSS中做了一些编辑，请更新这个，你的表格将会移动。

div#Sector   {
    background-color:white;
    color:black;
    clear:right;
    width:350;
    padding:10px;
}
div#Dmagic  {
    top:200px;
    left:70px;
}

我已从扇区和dmagic元素的位置移除了浮动。

（如果您不想删除浮动，则将宽度添加到扇区元素并使其阻止。）

无论我尝试什么，形式都不会在CSS中移动

3 个答案: