我正在构建的这个网页有 10 个 div 类堆叠成两行(顶部 5 个,底部 5 个)。每个里面都有一个图像。Chrome 和 Firefox 正在正确呈现所有内容,除了一个不应该显示为超链接的小文本短语(有关更多信息,请参阅本文底部)。这向我表明我的代码中的某些内容已关闭,但我一生都无法弄清楚是什么。在我 FTP 将其上传到实时站点之前,一切看起来都很正常。非常感谢您的帮助。
HTML:
<div id="text-brands">
<h2 class="blueheader">Learn More About Our Featured Brands</h2>
<br />
<div class="featuredBrands">
<a href="http://www.attvtedetails.com" target="_blank"><img src="images/Brand Logos/ATT.jpg" width="150" height="150" alt="AT&T" /> </a> </div>
<div class="featuredBrands"><a href="http://www.brotherdetails.com" target="_blank"><img src="images/Brand Logos/BROTHER.jpg" width="150" height="150" alt="Brother" /> </div>
<div class="featuredBrands"><a href="http://www.dymodetails.com" target="_blank"><img src="images/Brand Logos/DYMO.jpg" width="150" height="150" alt="Dymo" /></div>
<div class="featuredBrands"><a href="http://www.fujifilmdetails.com" target="_blank"><img src="images/Brand Logos/FUJI.jpg" width="150" height="150" alt="Fuji Film" /> </div>
<div class="featuredBrands"><a href="http://www.hpdetails.com" target="_blank"><img src="images/Brand Logos/HP.jpg" width="150" height="150" alt="HP" /> </div>
<div class="featuredBrands"><a href="http://www.imation-memorexdetails.com" target="_blank"><img src="images/Brand Logos/IMATION.jpg" width="150" height="150" alt="Imation" /> </div>
<div class="featuredBrands"><a href="http://www.kensingtondetails.com" target="_blank"><img src="images/Brand Logos/KENSINGTON.jpg" width="150" height="150" alt="Kensington" /> </div>
<div class="featuredBrands"><a href="http://www.logitechdetails.com" target="_blank"><img src="images/Brand Logos/LOGITECH.jpg" width="150" height="150" alt="Logitech" /> </div>
<div class="featuredBrands"><a href="http://www.verbatimdetails.com" target="_blank"><img src="images/Brand Logos/VERBATIM.jpg" width="150" height="150" alt="Verbatim" /> </div>
<div class="featuredBrands"><a href="http://www.lexmarkdetails.com" target="_blank"><img src="images/Brand Logos/LEXMARK.jpg" width="150" height="150" alt="Lexmark" /> </div>
<br />
<br />
<br />
</div>
CSS:
#text-brands {
width: 925px;
float: left;
padding-top: 30px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 20px;
}
.featuredBrands {
margin: 0px;
padding: 10px;
float: left;
width: 150px;
border: 5px solid #EAEAEA;
clear: none;
height: 150px;
overflow: hidden;
}
这是我遇到问题的链接:http ://www.officesolutions.com/technology-products.html
最后一个问题(如果有人可以提供帮助,我真的认为这是一个奖励)。页面底部“产品类别”最左侧的类别呈现为超链接(特别是 lexmark 徽标应该指向的链接) . 我无法弄清楚,因为该短语附近根本没有任何标记。它只是应该是一个标题,但由于某种原因显示为一个链接。
HTML:
<div id="content-bottom">
<div id="sitelinks">
<div class="column" style="border-left: none;">
<p><strong>Product Categories</strong></p>
<ul>
<li><a href="office-supplies.html">Office Supplies</a></li>
<li><a href="furniture-space-planning.html">Furniture & Space Planning</a></li>
<li><a href="facility-maintenance-supplies.html">Facility & Maintenance Supplies</a></li>
<li><a href="coffee-services.html">Coffee Services</a></li>
<li><a href="printing-promotional-products.html">Printing & Promotional Products</a></li>
<li><a href="technology.html">Technology</a></li>
</ul>
</div>
</div>
</div>