defprotocol
它只是在屏幕中间显示一个方形菜单,直到我调整窗口大小。它不再停留在中心,我该如何改变呢?我尝试过使用$('input[type=file]').change(function () {
console.dir(this.files[0]);
console.dir(this.files[0].name);
});
,但无济于事。如何让它保持固定到位?
答案 0 :(得分:2)
您已对菜单的位置进行了硬编码。而是将正文设置为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>
答案 1 :(得分:1)
试试这个
.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;
}
&#13;
<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>
&#13;
JsFiddle - https://jsfiddle.net/f39wurmn/