我将'导航'div(在5个按钮内)放在'#header'div中的页面右侧时出现问题."导航"div仍然位于"徽标"div旁边.
有人可以帮我把它放到页面的右侧吗？
CSS代码:
body {
background-color: #000000;
margin:0;
padding:0;
}
#header {
width: 100%;
height: 100px;
background-color: 222423;
margin-bottom: 5px
}
#logo {
float: left;
}
#navigation {
display: inline-block;
vertical-align: middle;
}
#content {
height: auto;
}
.knop {
margin-right: 7px;
margin-left: 20px;
vertical-align: middle
}
.plaatje {
position: fixed;
width: 628px;
height: 300px;
margin: -150px auto auto -319px;
top: 50%;
left: 50%;
text-align: center;
}
.DivHelper {
display: inline-block;
vertical-align: middle;
height:100%;
}
HTML代码:
<html>
<head>
<link typte="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="header">
<div id="logo">
<img src="images/logo.png" width="90px">
</div>
<div id="navigation">
<img class="knop" src="images/buttonhome.png">
<img class="knop" src="images/buttonoverons.png">
<img class="knop" src="images/buttonproduct.png">
<img class="knop" src="images/buttonmedia.png">
<img class="knop" src="images/buttoncontact.png">
</div>
<div class="DivHelper"></div>
</div>
<img class="plaatje" src="images/headimage.png" >
fkfddkfd
</div>
<div id="footer">
</div>
</body>
</html>
有多种方法,你可能需要尝试一些适合你的方法.
首先,有位置属性,如果你想将导航放到你得到的右边:
#navigation
{
position: absolute; /*or fixed*/
right: 0px;
}
这种方法非常具有情境性,可能会破裂.在某些情况下甚至打破了整个布局.最佳实践要求尽可能少地使用这个,但有时候别无选择.
另一种方式,可能是也可能不起作用,是使用float属性
#navigation
{
float: right;
}