0

私はCSSデザインがあまり得意ではありませんが、Webサイトのコンテンツ表示レイアウトに取り組んでいます。基本的には、コンテナ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 inspectで出力を表示すると、以下のスナップショットに示すように、出力結果が期待どおりに指定されたサイズになっていないように見えます。

ここに画像の説明を入力してください

また、スタイルシートセクションで設定されたものとは異なり、画像の幅と高さがそれぞれ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

私はそれを見つけました.あなたはそれを別のスタイルから継承したので、次のようにオーバーライドしてみてください:

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