Question

我有一个小型离线网站（已上传@ http://razorcloud.cz.cc/），其标题包含徽标，导航栏和通知栏。我似乎把它们排成一排，以及我喜欢的方式。然而，缺点是现在通知栏（header-alert）内的文本没有正确居中。

HTML：

<header class="header">
            <img style="float: left; padding-left: 20px" src="images/versace-logo.bmp" width="230" height="120" />
            <div class="bottom-header">
                <div class="navigation-bar" style="margin-top: 90px">
                    <ul>
                        <li>
                            <a href="#">Home</a>
                            <div class="dropdown-container dropdown-shadow">
                                <ul class="dropdown-column">
                                    <li><a href="#">First</a></li>
                                    <li><a href="#">Second</a></li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <a href="#">Video</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div style="clear:left"></div>
            <div class="header-alert">
                This website is still under development!
            </div>
        </header>

CSS：

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

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

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

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

我尝试了多次修复它，例如显示和边距属性，但我似乎无法找到解决方案，不包括修改我目前的确切布局。这可能是一件简单的事情虽然超出了我的想象。我不是在寻找任何可以添加空格的东西。

Answer 1

在听众提醒之前更改一行 - ＆＃34; clear：left＆＃34;到＆＃34;明确：两者都是＆＃34;

<div style="clear:left"></div>
            <div class="header-alert">

到

<div style="clear:both"></div>
            <div class="header-alert">

删除margin-top：15px; .header-alert

Answer 2

在height: 40px;

中添加.navigation-bar

Answer 3

.navigation-bar正在推动.header-alert，只需在position: absolute;中添加.navigation-bar，并使用right: 10px;设置右侧的间距（例如）

您还可以从float:right;

中删除.navigation-bar

Answer 4

希望这会对你有所帮助，

HTML：

<header class="header">
        <div class="img">
        <img src="images/versace-logo.bmp" width="230" height="120" />
</div>
        <div class="bottom-header">
            <div class="navigation-bar">
                <ul>
                    <li>
                        <a href="#">Home</a>
                        <div class="dropdown-container dropdown-shadow">
                            <ul class="dropdown-column">
                                <li><a href="#">First</a></li>
                                <li><a href="#">Second</a></li>
                            </ul>
                        </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：

.header
{
    background-color: black;
    display: block;
    font-family: "GillSansStdRegular";
    margin-bottom: 20px;
    padding-top: 10px;
    position: absolute;
    width: 100%;
}
.img {
    float: left; padding-left: 20px; position: relative;

}

.bottom-header
{
    position: relative;
    float: left;
    width: 100%;

}

.navigation-bar
{
    font-size: 12px;
    text-transform: uppercase;
    float: left;
    color: white;
}

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

Check this link: working demo

Answer 5

问题在于导航栏如何过度扩展到影响标题警报的程度。您还使用了边距和浮点数来定位它。我在下面的更正是基于我为位于http://calaverasfamilydentistry.net/的客户编写的最近网站的导航菜单

删除或注释掉以下内容：

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

添加或覆盖以下内容（您可以调整底部和右侧属性，但我已经冒蛮地使用我的方式来匹配您的原始位置。）

.navigation-bar {
    bottom: 0.75em;
    position: absolute;
    right: 1.65em;
}

您也可以删除或注释掉以下内容，因为它不是真正需要的，可能会妨碍您。

.navigation-bar {
    /*clear: right;
    color: white;
    display: inline-block;
    float: right;*/
}

我将如何在此DIV中居文本？

5 个答案: