Question

我是学习HTML和CSS的新手。我试图重新创建某个站点的一些设计接口，但遇到了问题。导航菜单虽然在标题中，但由于某种原因出现在它下面。我尝试了多种修复方法，但它们并没有最终起作用，而且我完全理解为什么它可能会做这样的事情。我上传了我的网站并打开了目录以进行探索。代码非常小，所以指出我的错误应该更容易一些。

http://razorcloud.cz.cc/

HTML：

<body class="body">
        <header class="header">
            <img style="padding-left: 20px" src="images/versace-logo.bmp" width="230" height="120" />
            <div class="bottom-header">
                <div class="navigation-bar">
                    <ul>
                        <li>
                            <a href="#">Home</a>
                            <div class="dropdown-container dropdown-shadow">
                                <div class="dropdown-column">
                                    <p>This is a simple test to determine how dynamic and fluid the dropdown-container is.</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <a href="#">Video</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!--<div class="header-alert">
                This website is still under development!
            </div>-->
        </header>

CSS：

.body
{
    margin: auto;
    width: 95%;
    clear: both;
}

.body a
{
    color: inherit;
}

.header
{
    background-color: black;
    color: white;
    display: block;
    font-family: "GillSansStdRegular";
    margin-bottom: 20px;
    position: relative;
}

.bottom-header
{
    display: block;
    position: relative;
    padding: 0 20px;
}

.navigation-bar
{
    color: white;
    display: inline-block;
    font-size: 12px;
    float: right;
    text-transform: uppercase;
}

.navigation-bar > ul
{
    border: transparent 1px solid;
    border-bottom: 0;
    float: left;
    height: 34px;
    list-style: none;
    margin-left: 5px;
}

.navigation-bar > ul a
{
    display: block;
    line-height: 16px;
    margin-right: 23px;
    padding: 0px 2px 0px 2px;
    text-decoration: none;
}

.navigation-bar > ul:active a
{
    background-color: white;
}

.navigation-bar > ul:hover a
{
    color: black;
    height: 31px;
    background: white;
}

.navigation-bar > ul:hover .dropdown-container
{
    display: block;
}

.dropdown-column
{

}

.dropdown-container
{
    color: black;
    display: none;
    position: absolute;
    z-index: 99;
    left: 0;
    width: 100%;
    border-color: black;
    border-top: 2px;
    border-top-style: solid;
}

.dropdown-shadow
{
    margin-top: 0;
    background: url("../images/backgrounds/submenu-bg.png");
    -webkit-box-shadow: 0 3px 3px 0 rgba(000,000,000,0.16);
    -moz-box-shadow: 0 3px 3px 0 rgba(000,000,000,0.16);
    box-shadow: 0 3px 3px 0 rgba(000,000,000,0.16);
}

.dropdown-shadow:after
{
    display: block;
    clear: both;
}

.header-alert
{
    background-color: white;
    border-bottom: 2px solid black;
    color: black;
    font-family: "GillSansStdLightRegular";
    font-size: 110%;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}

Answer 1

你需要漂浮你的元素。在标题内，<img/>应设置为float:left，导航容器（.navigation-bar）需要设置为float:right。并且你需要在浮动之后添加一个clearfix：

FIDDLE

在DIV下不受欢迎的内容

1 个答案: