Question

我注意到图像上方有一个白色空间，不幸的是它抛弃了设计的整洁。我不知道为什么它在那里，我减少了图像大小，甚至删除了表，没有任何修复它。它几乎出现在td的底部，但是它也有没有桌子的空间。所以我不确定是什么问题。

第二个问题是我的列表下方有一个厚厚的空白区域，上面是一个较小的空白区域。我没有边距或填充列表，我删除并增加填充到字体但没有区别。

以下是两个例子;

（没有表格的普通例子，实际上只有基本代码，问题仍然很明显。绿色线条不一致到列表（我想在上面和下面有一个小的空白区域，只有几个像素，不喜欢这个。） http://www.dinodeals.co.uk/test.html
（这里我在主要设计中添加了一个边框，纯粹是为了突出问题。这些空间现在更加明显。 http://www.dinodeals.co.uk/fossils.html

所以任何想法如何让线条进入中间以允许在其上方/下方的均匀白色空间。以及如何删除列表中的所有空白区域？

代码如下：

h1 {font-size: 30px;} 
h2 {font-size: 20px;}
p {font-size: 14px;}

A.class1 {text-decoration: none; text-transform: uppercase; font-weight: bold; text-align: center; font-size: 30px; padding: 6px;}
A.class1:link, A.class1:visited {color: #FFFFFF; background-color: #0fa616;}
A.class1:hover, A.class1:active {color: #0fa616; background-color: #ffffff;}

A.class2 {text-decoration: none; text-transform: uppercase; font-weight: bold; text-align: left; font-size: 16px;}
A.class2:link, A.class2:visited {color: #0fa616;}
A.class2:hover, A.class2:active {color: #0fa616;}

#sub li {list-style-type: square;}

#categories li {list-style-type: none; margin: 0; padding: 0; overflow: hidden; display: inline;}`

我删除了基本部分，例如html，body，doctype标签等

<table border="1" bordercolor="#000000" cellspacing="5" cellpadding="0" width="1240">

<tr><td colspan="2"><center><img src="http://www.dinodeals.co.uk/images/logo2.jpg"></center></td></tr>

<tr><td colspan="2">
<img src="/images/line.jpg" width="100%"></td></tr>


<tr><td colspan="2"><center>
<img src="/images/line.jpg" width="100%"><br>
<ul id="categories">
<li><a href="/index.html" class="class1">Home</a></li>
<li><a href="/crystals.html" class="class1">Crystals</a></li>
<li><a href="/meteorites.html" class="class1">Meteorites</a></li>
<li><a href="/faq.html" class="class1">FAQ</a></li>
<li><a href="/encylopedia.html" class="class1">Encyclopedia</a></li>
<li><a href="/contact.html" class="class1">Contact</a></li>
</ul><br>
<img src="/images/line.jpg" width="100%"></center></td></tr>

<tr><td colspan="2">
<img src="/images/line.jpg" width="100%"></td></tr></table></body>

Answer 1

看起来你的问题是HTML中的轻微错误。这不是一个CSS问题，试图在CSS中修复它会让你发疯。

您的HTML：

<div class="green-line"></div>
<ul id="categories">
    <li><a href="/index.html" class="class1">Home</a></li>
    <li><a href="/crystals.html" class="class1">Crystals</a></li>
    <li><a href="/meteorites.html" class="class1">Meteorites</a></li>
    <li><a href="/faq.html" class="class1">FAQ</a></li>
    <li><a href="/encylopedia.html" class="class1">Encyclopedia</a></li>
    <li><a href="/contact.html" class="class1">Contact</a></li>
<!-- NOTICE THE LINE BREAK -->
</ul><br>
<div class="green-line"></div>

您会注意到，在您关闭</ul>标记后，您放置了一个不必要的换行符，它会在屏幕上打印一个空白行。这个空白行就是您看到的，我不想让我相信的行。

我冒昧地将其变成了JSFiddle，你可以看到，用<div>制作条形图可能是更好的加载方式和造型目的。

Answer 2

我想为您提供一些指导性提示，以帮助您更好地构建网站。

*一般情况下，我不建议您使用图像进行边框设计，您用于网站的每个图像=为客户端加载更多图像，目的是尽可能多地设置页面加载时间即使有返回的客户端将使用缓存来加快加载速度，也总会有新的。使用css边框。

如果你想要使用图像，默认情况下图像设置为display: inline;，将“边框图像”设置为display: block;

*表格也不建议用于布局设计，如果你想了解它，有很多来源，这里有一个：Why not use tables for layout in HTML?

*使用margin而不是<br />标签来制作一些布局空间 - 例如，假设您明天要更改布局div之间的所有垂直空间，您需要搜索整个网站和添加/删除<br />标签，这是很多工作，它会让你的代码更脏，使用CSS，如果你做得对，你可以通过一个简单的动作，改变边际值。

边框图片的示例：

HTML：

<div id="categories_wrap">
    <img src="http://www.dinodeals.co.uk/images/line.jpg" width="100%" />
    <ul id="categories">
        <li><a href="/index.html" class="class1">Home</a></li>
        <li><a href="/crystals.html" class="class1">Crystals</a></li>
        <li><a href="/meteorites.html" class="class1">Meteorites</a></li>
        <li><a href="/faq.html" class="class1">FAQ</a></li>
        <li><a href="/encylopedia.html" class="class1">Encyclopedia</a></li>
        <li><a href="/contact.html" class="class1">Contact</a></li>
    </ul>
    <img src="http://www.dinodeals.co.uk/images/line.jpg" width="100%" />
</div>

CSS：

#categories_wrap
{
    text-align: center;
}

#categories_wrap img
{
    display: block;
}

直播：http://jsfiddle.net/5zzwxsbb/

带css边框的示例：

HTML：

<div id="categories_wrap">
    <ul id="categories">
        <li><a href="/index.html" class="class1">Home</a></li>
        <li><a href="/crystals.html" class="class1">Crystals</a></li>
        <li><a href="/meteorites.html" class="class1">Meteorites</a></li>
        <li><a href="/faq.html" class="class1">FAQ</a></li>
        <li><a href="/encylopedia.html" class="class1">Encyclopedia</a></li>
        <li><a href="/contact.html" class="class1">Contact</a></li>
    </ul>
</div>

CSS：

#categories_wrap
{
    text-align: center;
    border-top: 3px solid #0fa616;
    border-bottom: 3px solid #0fa616;
}

直播：http://jsfiddle.net/5zzwxsbb/1/

img及以下li html css上方的不需要的空间

2 个答案: