html - 我怎样才能使这项工作？

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 栏放在一个 div 包装器中并将其 float 到左侧，然后将你的个人资料 img 和文本放入另一个包装器并将其向左或向右浮动到你想要的任何位置。

你可以把导航放在一个包装器里，比如:

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

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

你会在顶部看到导航栏