Question

这是我的HTML代码：

<body>

<img id="logo" src="logo.png">
<br>

<!-- Start: Page Buttons -->

<div align="center" id="buttonBar">

<div class="menuButton" >
<a href="link" class="menuButtonText">Home</a>
</div>

<div class="menuButton" >
<a href="link" class="menuButtonText">Author</a>
</div>

<div class="menuButton" >
<a href="link" class="menuButtonText">Literature</a>
</div>

<div class="menuButton" >
<a href="link" class="menuButtonText">Projects</a>
</div>

<div class="menuButton" >
<a href="link" class="menuButtonText">Pictures</a>
</div>

<div class="menuButton" >
<a href="link" class="menuButtonText">How To...</a>
</div>

<div class="menuButton" >
<a href="link" class="menuButtonText">Updater</a>
</div>

<div class="menuButton" >
<a href="link" class="menuButtonText">Copyright</a>
</div>

</div>
<!-- End: Page Buttons -->

<h2>Welcome</h2>

</body>

这是我的CSS：

#buttonBar{
position: fixed;
width: 100%;
z-index=1;
padding-top: 65px;
}
.menuButton{
height: 50px;
width: 125px;
background-color: lightblue;
display:inline-block;
text-align: center;
line-height: 50px;
margin-left: 5px;
border-radius: 10px;
}

.menuButtonText{
font-size: 25px;
text-align: center;
line-height: 50px;
color: black;
text-decoration: none;
}

#logo{
padding-top: 15px;
padding-left: 15px;
}

我的HTML中的h2因某种原因会在徽标（img）下面，但仍然高于div。如何获得我的H2，以及我在Div下的任何其他内容？

Answer 1

将开头标记更改为：

<div align="center" id="buttonBar">
<div style="text-align: left; padding:0 0 15px 15px; vetical-align: top;"><img id="logo" src="logo.png"><br></div>
<div class="menuButton" >
<a href="link" class="menuButtonText">Home</a>
</div>

将您的CSS修改为：

#buttonBar{
position: fixed;
width: 100%;
top: 0;
left; 0;
background: #fff;
}

您可以将我制作的内嵌样式拉入css，并根据您的规格调整图像的填充。

Answer 2

我为你解决问题创造了一个小提琴：http://jsfiddle.net/vwqk411e/2

<nav>
    <ul>
        <li>Home</li>
        <li>Contact</li>
    </ul> 
</nav>
<div id="container">
    <h2>Hello</h2>
</div>

CSS

#container {
       margin-top: 100px;
    }

    nav {
        width: 100%;
        position:fixed;
        border-bottom: 1px solid grey;
        top: 0;
        left: 0;
        background-color:#fff;
    }

    ul {
        width: auto;

    }

    li {
        display:inline-block;
        float:left;
        padding: 10px;
        margin: 3px;
        border: 1px solid red;
    }

标题文本不会到底部代码

2 个答案: