6

我在将“导航”div（在 5 个按钮内）放置在“#header”div 中的页面右侧时遇到问题。'navigation' div 仍然在 'logo' 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>
4

6 回答 6

23

有多种方法可以解决此问题，您可能必须尝试适合您的方法。

首先，有 position 属性，如果你想把导航放在右边，你会得到：

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

这种方法是非常情境化的，可能会失败。在某些情况下，甚至会破坏整个布局。最佳实践要求尽可能少地使用这个，但有时别无选择。

另一种可能有效也可能无效的方法是使用 float 属性

#navigation
{
    float: right;
}
于 2013-10-26T12:51:33.130 回答
2

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

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

#content {
clear:both;
height: auto;
}
于 2013-10-26T12:53:13.353 回答
1

您需要在导航 div 和一些宽度中使用浮动。

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

更新这个类并检查它应该工作

于 2013-10-26T12:54:23.107 回答
1 
#navigation {
display: inline-block;
vertical-align: middle;
float: right;
padding-right: 50px;
padding-top: 50px;
}

如果你愿意，可以调整填充权和顶部像素....

于 2013-10-26T13:03:30.177 回答
0

优里，

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

看看这个：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;
}

我们在这里所做的是声明一个相对的父元素，并且您希望在右上角设置样式的元素与该关系绝对。

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

于 2013-10-26T13:26:37.477 回答
0

我使用margin-left了这样的属性：

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

这margin-left将在元素之外创建空间。您可以让元素的左侧有足够的空间，那么您的元素将是页面的右侧。

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

于 2018-07-13T03:33:34.567 回答