时间戳

首页 > 解决方案 > 为什么我的图像隐藏了 h2？为什么导航不是水平渲染的？

css - 为什么我的图像隐藏了 h2？为什么导航不是水平渲染的？

问题描述

我觉得自己像个白痴，因为我知道这是一件简单的事情。我不明白为什么徽标和标语图像不在灰色容器中。我也不明白为什么我的 h2 和 ul 在我的形象之上。感谢所有帮助。这应该看起来像https://imgur.com/a/3Qx3ihp 这就是它现在呈现的方式 https://imgur.com/a/WGyYzPr

<div id="topbar">
<img src="hw8_images/logo.png" alt="Blaine and Associates logo"><img src="hw8_images/blaine-tagline.png" alt="Blaine and Associates Inc. tagline"><img src="hw8_images/architectural-tagline.png" alt="Architectural Design and Consulting">
<ul class="nav">
    <li><a href="Contact.html">Contact</a></li>
    <li><a href="Employment.html">Employment</a></li>
    <li><a href="Projects.html">Projects</a></li>
    <li><a href="Services.html">Services</a></li>
    <li><a href="Company.html">Company</a></li>
</ul>
</div>
<div class="buildingimage"></div>
<div id="container">   
<h2>Quick Links</h2>
<ul id="QL">
    <li><a href="Free_Consultation.html">Free Consultation</a> 
</li>
    <li><a href="Client_List.html">Client List</a></li>
    <li><a href="testimonials.html">Testimonials</a></li>
    <li><a href="Open_positions.html">Open Positions</a></li>
    <li><a href="news.html">Latest News</a></li>
</ul>   
</div>


body {
font: normal normal normal 75%/1.3em verdana,geneva,lucida,arial,sans-serif; 
text-decoration: none; background-color: #fff;
}

.topbar{
background-color: #4d4d4d;
font-color: #fff;
height: 15px;
min-width: 500px;
max-width: 950px; 
}

.nav li{
font: normal normal normal 100%/2em verdana,geneva,lucida,arial,sans-serif;
text-decoration: none;
display: inline-block;
list-style: none;
text-decoration: none;
text-align: center;
float: right;

}


h1 {
font: normal normal normal 140%/1.3em verdana,geneva,lucida,arial,sans- 
serif; text-decoration: none;
}

h2 {
font: normal normal normal 120%/1.3em verdana,geneva,lucida,arial,sans- 
serif;
text-decoration: none;
float: left;
position: relative;
}

footer li {
display: inline-block;
list-style-type: none;
font: normal normal normal 90%/2em verdana,geneva,lucida,arial,sans-serif;
text-decoration: none;
text-align: center;
background-color: #4d4d4d;
font-color: #fff;
}

#container {
position: relative;
height: 300px;
width: 400px;
}

.buildingimage {
background-image: url(hw8_images/building.jpg);
float: left;
background-repeat: no-repeat;
position: absolute;
margin: .5em;
background-size:cover;
height: 7em;
min-width: 200px;
max-width: 250px 
}

#QL {
list-style: circle;
float: left;
position: relative;
}

标签： csshtml

解决方案

“我不明白为什么标志和标语图片不在灰色容器中。”

它们在里面，但容器没有样式，因为您无法使用 .topbar 找到它，因为它是 id 而不是类。所以#topbar 会做到这一点。如果你让它大于 15px，所有元素都将显示在里面。

H2 和 ul 位于 background-img 的顶部，因为它位于绝对位置。如果将其更改为相对，图像将向左浮动，H2 和 ul 在右侧对齐。

推荐阅读