Question

很抱歉我的标题含糊不清，我不知道如何解释。

我正试图在页面顶部一直制作导航栏，并在图像下方放置小文本。

我的css：

.profile {
    text-align: center;
    width: 200px;
    font-size: 1.2em;
    margin: 0px;
    display: block;
}
.profile img {
    float: left;
    width: 200px;
    height: 200px;
    border: 3px ridge #fafafa;
}
.nav {
    width: 75%;
    margin: 0 auto;
    list-style-type:none;
    display: table;
}
.button {
    display:inline;
    font-size: 3em;
    text-align: center;
    display: table-cell;
    color: black;
}
.button a {
    text-decoration: none;
    display: block;
}
.button a:hover {
    text-shadow: 1px 1px 1px #414345;
}

我的HTML：

<div class="profile">
            <img src="assets/img/profile.png">
            <p>Bobby Morton<br>IT Pro</p>
        </div>
        <ul class="nav">
            <li class="button">
                <a href="#">
                    Home
                </a>
            </li>
            <li class="button">
                <a href="#">
                    Services
                </a>
            </li>
            <li class="button">
                <a href="#">
                    About
                </a>
            </li>
            <li class="button">
                <a href="#">
                    Contact
                </a>
            </li>
        </ul>

所以这就是我将.profile类作为display：block ..

时的样子

http://codymorton.us/block/

图片下方的文字有效，但我的导航栏一直向下推。

但是，当我将内联配置文件类内联时，它会这样做..

http://codymorton.us/inline/

我怎样才能使导航器位于顶部，图像下方的文字仍在那里？

感谢您的帮助！

Answer 1

这样做的最好方法就是将你的nab bar放在div包装中并将其浮动到左边，然后将你的配置文件img和text放到另一个包装器中，然后向左或向右浮动它。

你可以把导航器放在一个包装器中，如：

<div class="nav-wrap"> //put your navigation here </div>

然后将配置文件信息放在另一个div包装器中，并将此display:block添加到它们的包装器中。

您将获得顶部的导航栏

我怎样才能做到这一点？

1 个答案: