0

我不太擅长 CSS 设计，但我只是在为网站设计内容显示布局。我基本上想通过将图像放在容器 div 中来制作一条细线。并如下设置所有维度属性。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style>
       #thinLineWrap{
            width: 510px; 
            height: 3px;
            background-color: #000000;
       }  
       #thinLineWrap img{
           width: 170px;
           height: 3px;
           background-color: #000000;
           margin-top: 0px;
           float:left
       }
    </style>
</head>
<body>
     <div id="thinLineWrap">
        <img src="images/thin_line.gif" border="0">
    </div>
</body>
</html>

但是在 Chrome 检查中查看输出时，输出结果似乎无法达到预期的指定大小，如下面的快照所示。

在此处输入图像描述

您可能还注意到我的图像宽度和高度分别变为 171px 和 4px，这与样式表部分中的设置不同。我可能犯的任何错误？为什么图像元素变得比应有的大 1 个像素？任何建议将不胜感激。

编辑： 原始有问题的细线图像的副本在这里。不确定图像本身是否有任何问题。

https://lh5.googleusercontent.com/-kDRsR493dZU/UMOXRBbty9I/AAAAAAAAAh8/g58GnqQZ3pk/s128/thin_line.gif

4

2 回答 2

0

您在 #thinlinewrap 中定义了一个 Img 以具有这些属性。

div#thinLineWrap{
   border:0px;
}

#thinlineWrap img{
   height:3px;
}

可能是您正在寻找的代码。

于 2012-12-08T19:23:23.353 回答
0

我发现了。你的 img 从另一种风格继承了它的边框，尝试像这样覆盖它：

#thinLineWrap img{
           border:none;
           width: 170px;
           height: 3px;
           background-color: #000000;
           margin-top: 0px;
           float:left
       }
于 2012-12-08T19:29:35.043 回答