Question

我想在我的菜单中放置我的徽标，并在页面中间放置列表。但只有当我把它漂浮在右边时，我的标志才会留在我的菜单中...以下是一个例子：http://gyazo.com/76719bc76c08765cb1f8fee588b3daae

<body>
<div id="Wrapper">
<header>
    <div id="Menu">
        <div id="Nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Social</a></li>
            </ul>
        </div>
        <Div id="logo">
            <img src="Breaking Bad.png" alt="Logo" height="150px">
        </div>
    </div>
</header>   
<div id="Video"><iframe width="640" height="360" src="http://www.youtube.com/embed/Gx7L8FWN80Y" frameborder="0" allowfullscreen></iframe></div>
<div id="News"></div>
<div id="Footer"></div>
</div>

</body>

    body{
    font-family:impact;
    overflow-y: scroll;
    background-color:#4A4247;
    margin:0px;
}
#Wrapper{
    margin:0 auto;
    width:1000px;
}
#Menu{
    color:#09b800;
    margin:0 auto;
    width:1000px;
    height:150px;
    background-color:#151D04;
}
#Nav{
    text-align:center;
    margin:0 auto;
    display:table;

}
#Logo{
    clear:right;
    float:left;
}
#Video{
    width:640px;
    height:360px;
    margin-top:20px;
    float:left;
    background-color:black;
    margin-bottom:20px;
}
#News{
    margin-top:20px;
    width:340px;
    height:360px;
    color:black;
    float:right;
    background-color:black;
    margin-bottom:20px;
}
#Footer{
    clear: both;
    background-color:black;
    height: 100px;
}

Answer 1

这可能有用：

<body>
<style>
   body{
    font-family:impact;
    overflow-y: scroll;
    background-color:#4A4247;
    margin:0px;
}
#Wrapper{
    margin:0 auto;
    width:1000px;
}
#Menu{
    color:#09b800;
    margin:0 auto;
    width:1000px;
    height:150px;
    background-color:#151D04;
}
#Nav ul{
margin:0 auto;

}
#Nav{
width:850px;
margin-left:-75px;
    text-align:center;
    display:table;
    float:left;
}
#Logo{
    clear:right;
    float:left;
    width:150px;
}
#Video{
    width:640px;
    height:360px;
    margin-top:20px;
    float:left;
    background-color:black;
    margin-bottom:20px;
}
#News{
    margin-top:20px;
    width:340px;
    height:360px;
    color:black;
    float:right;
    background-color:black;
    margin-bottom:20px;
}
#Footer{
    clear: both;
    background-color:black;
    height: 100px;
}
</style>
<div id="Wrapper">
<header>
    <div id="Menu">

        <div id="logo">
            <img src="Breaking Bad.png" alt="Logo" height="150px">
        </div>
        <div id="Nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Social</a></li>
            </ul>
        </div>
    </div>
</header>   
<div id="Video"><iframe width="640" height="360" src="http://www.youtube.com/embed/Gx7L8FWN80Y" frameborder="0" allowfullscreen></iframe></div>
<div id="News"></div>
<div id="Footer"></div>
</div>

</body>

我将HTML和CSS合并在一起，
把float放到#Nav和#Logo，静态宽度，带有负边距。阅读代码，你会注意到这个技巧。

添加列表时徽标移出菜单

1 个答案: