調整窗口大小時HTML更改位置

{% load staticfiles %} 
<!DOCTYPE html> 
<html> 
<head> 
<title>Example</title> 
<link href="{% static 'css/hover.css' %}" rel="stylesheet" media="all"> 
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all"> 

<!-- CSS -->  
<style> 

.menu { 
font-family: sans-serif; 
background: blue; 
padding: 5px; 
width: 130px; 
z-index: 100; 
bottom: 200px; 
right: 700px; 
box-shadow: 5px 5px 5px; 
border-radius:5px 5px 5px 5px; 
margin-bottom: 160px; 
position: relative;left:700px;top:250px; 

} 

.menu a, 
.menu h3 { 
font-size: 0.9em; 
display: block; 
margin: 0 0.5em; 
color: white; 
} 

input { 
    width: 120px; 
} 

</style> 
</head> 
<body> 


<!-- HTML --> 
<main> 

<nav class="menu"> 
<div id='wrapper'> 
<h3>Login</h3> 

<form method='POST' class= "post-form"> {{ form.as_p }} </form> 

<a href="#" class="hvr-grow">Create Account</a> 
</div> 

</nav> 

</main> 

</body> 
</html>

它只是在屏幕中間顯示一個方形菜單，直到我調整窗口大小。它不再停留在中心，我該如何改變它？我試過使用min-width但無濟於事。我如何讓它保持固定？調整窗口大小時HTML更改位置

來源

2017-02-13 Amon

試試這個

.menu { 
 
font-family: sans-serif; 
 
background: blue; 
 
padding: 5px; 
 
width: 130px; 
 
z-index: 100; 
 
box-shadow: 5px 5px 5px; 
 
border-radius:5px 5px 5px 5px; 
 
margin-bottom: 160px; 
 
position: relative; 
 
top:250px; 
 
margin: auto; 
 
} 
 

 
.menu a, 
 
.menu h3 { 
 
font-size: 0.9em; 
 
display: block; 
 
margin: 0 0.5em; 
 
color: white; 
 
} 
 

 
input { 
 
    width: 120px; 
 
}

<main> 
 
    <nav class="menu"> 
 
    <div id='wrapper'> 
 
     <h3>Login</h3> 
 
     <form method='POST' class= "post-form"> {{ form.as_p }} </form> 
 
     <a href="#" class="hvr-grow">Create Account</a> 
 
    </div> 
 
    </nav> 
 
</main>

的jsfiddle - https://jsfiddle.net/f39wurmn/

來源

2017-02-13 05:06:07 grinmax

感謝你，似乎工作！那麼，例如，「margin-top」和「top」之間的區別是什麼？ – Amon

@Amon你更好地理解CSS屬性以及它們是如何工作的 – grinmax

它是一個不同的值定位元素，當項目有位置時頂部工作：相對或絕對 – grinmax

你硬編碼您的菜單的定位。請將機構設置爲position: relative，並將導航設置爲position: absolute。然後，您可以使用css calc()函數將導航中心放在任何大小的頁面上。見例如：

html { 
 
    min-height: 100%; 
 
    } 
 
body { 
 
    height: 100vh; 
 
    width: 100%; 
 
    position:relative; 
 
    } 
 

 
.menu { 
 
position: absolute; 
 
font-family: sans-serif; 
 
background: blue; 
 
padding: 5px; 
 
width: 130px; 
 
z-index: 100; 
 
top:calc((100vh - 2.7em - 10px)/2); 
 
right:calc((100% - 140px)/2); 
 
box-shadow: 5px 5px 5px; 
 
border-radius:5px 5px 5px 5px; 
 

 

 

 
} 
 

 
.menu a, 
 
.menu h3 { 
 
font-size: 0.9em; 
 
display: block; 
 
margin: 0 0.5em; 
 
color: white; 
 
} 
 

 
input { 
 
    width: 120px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all"> 
 

 

 

 

 
<!-- HTML --> 
 
<main> 
 

 
<nav class="menu"> 
 
<div id='wrapper'> 
 
<h3>Login</h3> 
 

 
<form method='POST' class= "post-form"> {{ form.as_p }} </form> 
 

 
<a href="#" class="hvr-grow">Create Account</a> 
 
</div> 
 

 
</nav> 
 

 
</main>

來源

2017-02-13 05:15:31 wlh

這個效果也很好，這個答案和另一個答案的區別在於，這個結果是一個可滾動的頁面。這是好還是壞？ – Amon

調整窗口大小時HTML更改位置

回答

相關問題