Question

我在将“导航”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 code：

<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>

Answer 1

有多种方法，您可能需要尝试一些适合您的方法。

首先，如果你想将导航设置在你想要的右边，那就是位置属性：

#navigation
{
    position: absolute; /*or fixed*/
    right: 0px;
}

这种方法非常具有情境性，可能会破裂。在某些情况下甚至打破了整个布局。最佳实践要求尽可能少地使用这个，但有时候别无选择。

另一种方式，可能会或可能不会再次使用浮动属性

#navigation
{
    float: right;
}

Answer 2

这样做（使用浮动并且不要忘记内容div中的清除）：

#navigation {
display: inline-block;
vertical-align: middle;
float: right;
}

#content {
clear:both;
height: auto;
}

Answer 3

你需要在导航div和一些宽度中使用float。

#navigation {
 display: inline-block;
 vertical-align: middle;
 float:right;
 }

更新此课程并检查它是否有效

Answer 4

#navigation {
display: inline-block;
vertical-align: middle;
float: right;
padding-right: 50px;
padding-top: 50px;
}

如果你想要的话，

调整padding right和top px ....

Answer 5

尤里，

有几种方法可以实现这个效果，这里有一个。

看看这个：http://jsfiddle.net/legendarylion/8jKUP/1/

THE HTML
<body>
<div id="header">
<div id="logo">
    <!--You may wish to eliminate the "width" property here and use the css to style the image... also, I'm assuming you're going to want to wrap this image in an anchor tag that points back to index.html (or default.html, whatever your homepage is...-->
    <img class="example-logo" src="images/logo.png" width="90px">
</div>
<!--Your image code in your original source did not have anchor tags. If you want those to function as a nav, you might as well mark it up like I have it below, wrapping the image inside of a 'nav' element, ul, li, and anchor tag. Also see the CSS comments for ideas on sprite images and sticky menus-->
<nav>
    <ul>
        <li><a href="#"><!--add your image code back here-->Home</a>
        </li>
        <li><a href="#"><!--add your image code back here-->Overons</a>
        </li>
        <li><a href="#"><!--add your image code back here-->Product</a>
        </li>
        <li><a href="#"><!--add your image code back here-->Media</a>
        </li>
        <li><a href="#"><!--add your image code back here-->Contact</a>
        </li>
    </ul>
</nav>
</div>
<div class="DivHelper"></div>
</div>
<div id="footer"></div>
</body>

</html>

THE CSS    
/* Make the header relative so we that the 'asbolute' positioning uses it as a reference, also, let's give that header an outline so we can see what we're doing */
 #header {
    position:relative;
    border:1px dashed green;
}
/* Make the nav position asboslute to place it to the right */
 nav {
    position:absolute;
    top:0px;
    right:0px;
    border:1px dashed blue;
}
/*So what happened?  The parent element "header" is referenced by "nav" and "nav" is positioned absolutely relative to that parent in the top right hand corner.  Nav will stay there even if the parent container has more elements added to it.

Also, it's worth asking I think... Did you want the menu static, or fixed as the page scrolls?  That might be worth looking into as well. Look to the trusty W3C to help you out there: http://www.w3.org/Style/Examples/007/menus.en.html*/

/* Style the Nav (You can add your images right back into the html if you prefer, though you may want to look up how to make a sprite image with the css background property and positioning so they load as one file call, but hey, first thing is first right? */
 nav ul li {
    list-style-type:none;
    display:inline-block;
    margin:0 10px;
}
nav ul li a {
    text-decoration:none;
}
.example-logo {
    height:50px;
    width:50px;
    background:blue;
}

我们在这里做的是声明父元素相对，并且您想要在右上角设置的元素绝对是该关系。

另请查看我在该代码中的评论，了解我认为可能对您有所帮助的其他一些想法。

Answer 6

我这样使用margin-left属性：

#navigation {
display: inline-block;
vertical-align: middle;
margin-left: 70%;
}

margin-left将在元素外侧创建空格。您可以在元素的左侧留出足够的空间，然后您的元素将在页面的右侧。

参考： https://www.w3schools.com/css/css_margin.asp

DIV到页面的右侧

6 个答案: