Question

标题说明了一切。我试图包装整个html体，但那不起作用。当我最小化浏览器或拖动角落时，我页面上的所有元素都会移动。建议？我在这里添加我的代码，也许有人可以找到错误。页面没有完成btw！

＆＃13;

h1 {
    font-family: Arial, Helvetica, sans-serif;
}

/* KATEGORIER*/

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f1f1f1;
}

li a {
    float:left;
    display: block;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    padding: 16px;
    text-decoration: none;
    cursor:pointer;
}

li a:hover{
    background-color: none;
    color: #0095cc;

}

/* SØKEBAR*/

#searchbar {
    position: relative;
    top: 30%;
    right: 1000px;
}

/*LOGIN*/

form {
    float:right;
    width:35%;
    position:absolute;
    top:20px;
    right:10px;
    font-family: Arial, Helvetica, sans-serif;

}

.tftextinput{

}

/*BOKSER*/

.boxed{

  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid black 4px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.boxed{
    position: relative;
    bottom:-70px;
    right:530px;
    background-color: white;

}

＆＃13;

<!DOCTYPE html>
<html>
<head>

<title>Startside</title>
<meta charset="utf-8" />




</head>

<body>

<h1>Filmregister</h1>

<!-- KATEGORIER -->
<ul>
  <li><a href="startside.html">Startside</a></li>
  <li><a href="minliste.html">Min Liste</a></li>
  <li><a href="minelån.html">Mine lån</a></li>
</ul>


<!-- SØKEBAR -->

<div id="searchbar">
        <form id="tfnewsearch" method="get" action="">
                    <input type="text" class="tftextinput" name="q" size="21" maxlength="120"><input type="submit" value="søk" class="tfbutton">
        </form>
<div class="tfclear"></div>
</div>

<!-- LOGIN -->

<form>

  <label for="E-postadresse">E-postadresse</label>
  <input name="E-postadresse" placeholder="E-postadresse" id="E-postadresse" />

  <label for="Passord">Passord</label>
  <input type="password" placeholder="Passord" id="Passord" />

  <input type="submit" value="Logg inn" />

  </form>

  <!--BOKSER-->

<div class="boxed">
Dette er en test
</div>


</body>


</html>

＆＃13;

Answer 1

定位有很多问题。我建议使用某种网格框架开始，并查看该代码并查看它是如何完成的（例如bootstrap）。它使布局更容易。 http://www.w3schools.com/bootstrap/通过该教程，您将学到很多关于定位和页面布局的知识。

Answer 2

我不能让你停下来：D我离开了颜色，所以你看到发生了什么。您可以在之后删除它们。而这个在stackoverflow上页面内部的代码移动到显示权是真的很烦人。可能有一个我不知道作为新成员的解决方案。顺便说一下最小宽度：900px;在类标题上是为了防止登录表单在Filmregister之上重叠。在Mozilla版本上测试我没有任何线索：D我所说的是它很可能在不同的浏览器上表现不同。

<!DOCTYPE html>
<html>
<head>

<title>Startside</title>
<meta charset="utf-8" />

<style>

h1 {
font-family: Arial, Helvetica, sans-serif;
}

/* KATEGORIER*/

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f1f1f1;
}

li a {
float:left;
display: block;
color: black;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
padding: 16px;
text-decoration: none;
cursor:pointer;
}

li a:hover{
background-color: none;
color: #0095cc;

}

/* SØKEBAR*/

#searchbar {
position: absolute;
left: 30px;
top: 200px;
}

/*LOGIN*/

form {
float:right;
width:35%;
position:absolute;
top:20px;
right:10px;
font-family: Arial, Helvetica, sans-serif;

}

.tftextinput{

}

/*BOKSER*/

.boxed{

width: 500px;
margin: 20px auto;
padding: 50px;
border: solid black 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.boxed{
position: absolute;
top: 300px;
left:20px;
background-color: white;

}

.header
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
min-width:900px;
background-color: red;
display: inline-block;
}

.menu
{
position: absolute;
top: 100px;
left: 0px;
width: 100%;
background-color: yellow;
display: inline-block;
}

.login
{
position: absolute;
top: 10px;
right: 0px;
width: 650px;
background-color: yellow;
display: inline-block;
}



</style>


</head>

<body>

<!-- KATEGORIER -->
<span class='menu'>
<ul>
<li><a href="startside.html">Startside</a></li>
<li><a href="minliste.html">Min Liste</a></li>
<li><a href="minelån.html">Mine lån</a></li>
</ul>
</span>

<!-- SØKEBAR -->

<div id="searchbar">
<pre><form id="tfnewsearch" method="get" action=""><input type="text" class="tftextinput" name="q" size="21" maxlength="120"><input type="submit" value="søk" class="tfbutton"></form></pre>
<div class="tfclear"></div>
</div>

<!-- LOGIN -->
<span class='header'>

<h1>Filmregister</h1>


<form>
<span class='login'>
 <label for="E-postadresse">E-postadresse</label>
 <input name="E-postadresse" placeholder="E-postadresse" id="E-postadresse" />

  <label for="Passord">Passord</label>
  <input type="password" placeholder="Passord" id="Passord" />

  <input type="submit" value="Logg inn" />
</span> 
  </form>

</span>
  <!--BOKSER-->

<div class="boxed">
Dette er en test
</div>


</body>


</html>

最小化浏览器时，我的网页上的元素会移动[CSS，HTML]

2 个答案: