navbar干扰div - HTML / CSS

时间：2015-10-12 18:12:32

标签： html css

使用HTML / CSS的初学者。在一个简单的网页上工作。到目前为止，我已经插入了一个侧面导航栏，但我尝试将登录表单放到页面中心的所有尝试都失败了。唯一有效的边距值是“自动”，它将我的表单粘贴到页面顶部。我对任何保证金属性所做的任何更改都会导致我的导航栏完全陷入困境。我希望它位于页面的中心，而不是如图所示的导航栏。

目前：![enter image description here] 1 

    @import url('http://fonts.googleapis.com/css?family=Open+Sans');
    body {
    	font-family: 'Open Sans', Arial, sans-serif;
    	background-color: #ccf;
    }
    
    nav {
    	position: fixed;
    	width: 200px;
    	height: 100%;
    	background-color: #036;
    }
    
    nav ul {
    	list-style: none;
    	margin-top: 50px;
    }
    
    nav ul li a {
    	text-decoration: none;
    	display: block;
    	text-align: center;
    	color: #ccf;
    	padding: 30px 0;
    	font-size: 30px
    }
    
    nav ul li a:hover {
    	color: #fff;
    }
    
    .login {
    
    height:100px;
    width:170px;
    margin:auto;
    border:1px #CCC solid;
    padding:10px;
    background-color:#E9E9E9 
    }
    
    input {
    background: #E1FFE1;
    border:1px #CCC solid;
    padding:5px;
    }
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Project</title>
		<link rel="stylesheet" href="reset.css">
		<link rel="stylesheet" href="style.css">

	</head>
	<body>
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Services</a></li>
				<li><a href="#">Contact</a></li>
			</ul>

		</nav>

		<div class="login">
		<input type="text" placeholder="Username" id="username"> 
		<input type="password" placeholder="Password" id="password"> 

		<a href="#" class="forgot">forgot password?</a>

		<input type="submit" value="Sign In">

		</div>


	</body>
</html>

4 个答案:

答案 0 :(得分：1)

将此添加到.login样式

position:absolute; /*can also be fixed*/
left:0; right:0;
top:0; bottom:0;
margin:auto;

http://jsfiddle.net/145w1b6s/

或者如果您想要从200px

的宽度的左侧原因<nav>放置它 
position:absolute; /*can also be fixed*/
left:200px; right:0;
top:0; bottom:0;
margin:auto;

http://jsfiddle.net/145w1b6s/1/

答案 1 :(得分：0)

你应该用另一个div包装你的登录div，然后插入margin-left属性，然后为其分配与导航宽度（200px）相等的marign。结帐我的剪辑。

＆＃13;
＆＃13; 
@import url('http://fonts.googleapis.com/css?family=Open+Sans');


body {
    font-family: 'Open Sans', Arial, sans-serif;
    background-color: #ccf;
}

.main {
  margin-left: 200px;  
}

nav {
    position: fixed;
    width: 200px;
    height: 100%;
    background-color: #036;
}

nav ul {
    list-style: none;
    margin-top: 50px;
}

nav ul li a {
    text-decoration: none;
    display: block;
    text-align: center;
    color: #ccf;
    padding: 30px 0;
    font-size: 30px
}

nav ul li a:hover {
    color: #fff;
}

.login {

height:100px;
width:170px;
margin:0 auto;
border:1px #CCC solid;
padding:10px;
background-color:#E9E9E9;
text-align: center;
}

input {
background: #E1FFE1;
border:1px #CCC solid;
padding:5px;
}
＆＃13; 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Project</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">

    </head>
    <body>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

        </nav>
        <div class="main">
        <div class="login">
        <input type="text" placeholder="Username" id="username"> 
        <input type="password" placeholder="Password" id="password"> 

        <a href="#" class="forgot">forgot password?</a>

        <input type="submit" value="Sign In">

        </div>
        </div>


    </body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

如果您希望a div居中，您还可以查看CSS属性transform 

.login

这可能完全解决问题

答案 3 :(得分：0)

垂直居中元素的方法有很多种。在我看来，最容易理解的是使用表格布局。在这种情况下，我们不会创建一个实际的数据表，只是为我们的设计创建像表一样的容器。因此，与<table>或<td>元素相比，使用CSS创建布局更为可取。

CSS等价物分别为display: table;和display: table-cell;。除了这两种样式之外，您还会在包含的代码段中的单元格上使用vertical-align: middle;来创建所需的效果。这也应解决您的水平居中问题。

@import url('http://fonts.googleapis.com/css?family=Open+Sans');

* { margin: 0px; padding: 0px; }

html {
  height: 100%;
}

body {
  display: table;
  width: 100%;
  min-height: 100%;
  font-family: 'Open Sans', Arial, sans-serif;
  background-color: #ccf;
}

nav {
  display: table-cell;
  padding: 20px;
  width: 200px;
  background-color: #036;
  vertical-align: top;
}

nav ul {
  list-style: none;
}

nav ul li a {
  text-decoration: none;
  display: block;
  text-align: center;
  color: #ccf;
  padding: 30px 0px;
  font-size: 20px
}

nav ul li a:hover {
  color: #fff;
}

.main {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
  text-align: center;
}

.login {
  height: 100px;
  width: 170px;
  margin: auto;
  border: 1px #CCC solid;
  padding: 10px;
  background-color: #E9E9E9 
}

input {
  background: #E1FFE1;
  border: 1px #CCC solid;
  padding: 5px;
}
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<div class="main">
  <div class="login">
    <input type="text" placeholder="Username" id="username"> 
    <input type="password" placeholder="Password" id="password"> 

    <a href="#" class="forgot">forgot password?</a>

    <input type="submit" value="Sign In">

  </div>
</div>

相关问题
最新问题