Question

我觉得自己是个白痴，因为我知道这很简单。我不知道为什么徽标和标语图像不在灰色容器中。我也无法理解为什么我的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;
}

Answer 1

问题是您将float:left添加到了h2和#QL选择器中。如果您不了解浮动元素的工作方式，则可能会很危险。它从标准流程中删除该元素，然后将其按分配的方式一直推到顶部和左侧或右侧。仅对于其他浮动元素或clear设置为同一面（left或right）或both的元素停止。

查看this CSS技巧文章以了解更多详细信息。

我还建议您阅读一些有关CSS基本概念的文章。 CSS-Tricks有很好的beginner concepts集合。我认为您可能会发现其中一些帮助。

Answer 2

“我不知道为什么徽标和标语图像不在灰色容器中。”

它们在内部，但是容器未设置样式，因为您无法使用.topbar找到它，因为它是一个id而不是一个类。所以#topbar会做到的。如果将其设置为大于15像素，则所有元素都将显示在其中。

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

Answer 3

您的.buildingimage位置绝对正确，他不应该！放入绝对值可使元素与其他元素重叠。将其放到“相对”位置，或者如果确实不需要，则将其删除。还有您的h2有个浮动。

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

3 个答案: