Question

我需要将我的横幅与按钮对齐，横幅尺寸为w：967 h：106，尝试直接添加图像，但它会将所有按钮向右推。

这是我的代码到目前为止的样子：

HTML

<nav>
    <img src="png"/>
        <ul class="fancyNav">
            <li id="home"><a href="index.php" class="homeIcon">Home</a></li>
            <li id="s"><a href="#s">Social</a></li>
            <li id="p"><a href="#p">Political</a></li>
        </ul>
    </nav>

CSS

.fancyNav{
    overflow: hidden;
    display: inline-block;
    position: absolute;
    text-align: center;
    top: 16%;
    margin-left: 170px;
}

网站链接：http://mops.pcriot.com/main.html

Answer 1

这是由display: inline-block;造成的，其行为如下：

Displays an element as an inline-level block container.
The inside of this block is formatted as block-level box,
and the element itself is formatted as an inline-level box.

使用display: block可解决此问题，但您可能需要执行更多操作以对齐导航。任何包含inline的内容都会导致您所看到的内容。

以下是display:属性的其他选项：

http://www.w3schools.com/cssref/pr_class_display.asp

Answer 2

.fancNav {
    top: 110px;
}

将110调整为最佳效果

Answer 3

在班级中进行一些更改

.fancyNav {
    overflow: hidden;
    display: inline-block;
    text-align: center;
    top: 16%;
    margin-left: 170px;
    width: 100%;
    }

Answer 4

左对齐 - 尝试删除：

.fancyNav {
    margin-left: 170px;
}

然后添加：

.fancyNav {
    padding: 0;
}

居中对齐 - 按上述方式添加：

nav {
    margin-left: 170px;
}

或相反（可能更好）：

nav {
    width: 967px;
    margin: 0 auto;
}

如何在按钮上方对齐横幅

4 个答案: