0

img要素を左側に移動させることができません。左：0px属性は何もしていません。実際、＃topdiv内で移動するものを移動することはできないようです。

imgタグは上部にあります。ウェブページの残りの部分は省略しましたが、これで十分だと思います。

HTMLコード：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div id="topBorder">&nbsp;</div>

    <div id="top">
        <img src="logo.png" style="width:50%; height: 20%; left: 2em"/>
    </div>

</body>

</html>

CSSコード：

body {
max-width: 60em;
margin: auto;
position: relative;

}

div {
border: solid;
text-align: center;
margin-top: 1em;
margin-bottom: 1em;

}

#topBorder {

background-color:#255FAA;
height: .7em;
width: 100%;
border: transparent;
}

#top {
background-color: white;
border: transparent;
height: 13%;
width: 100%;
font-family: Georgia, Palatino Linotype; 

}


#top img{
border: solid black;
position: relative;
left: 0px;
}
4

3 に答える 3

1

text-align:centerあなたのdiv要素からのが問題のようです。それをオーバーライドしてみてください#top。期待どおりに動作し始めると思います。このフィドルを参照してください：

http://jsfiddle.net/3KyrW/

于 2013-02-02T01:55:40.600 に答える
0

あなた#topは持っているべきですpositive: relative、そしてあなた#top imgは持っているべきposition: absoluteです...それはあなたのヘッダーの中で画像を動かします。

于 2013-02-02T01:40:17.313 に答える
0

何をどのように位置付けようとしているのかについては、100% 確信が持てません。display: block;しかし、 aと afloat: left;を追加すると#top img、画像が左に浮いているように見えます。使用left: 0px;時は必要ないposition: relative;ので外しました。にも を追加しposition: relative;ました#top <div>。

<img>また、タグにインライン スタイルがあるようですか? それはオフのようです。

<img src="logo.png" style="width:50%; height: 20%; left: 2em"/>

だから私はそれを取り出してCSSにも追加しました。新しい<img>タグは次のようになります。

改訂された CSS は次のとおりです。

#top {
    position: relative;
    background-color: white;
    border: transparent;
    height: 13%;
    width: 100%;
    font-family: Georgia, Palatino Linotype; 
}


#top img{
    border: solid black;
    position: relative;
    display: block;
    float: left;
    width: 50%;
    height: 20%;
    left: 2em;
}
于 2013-02-02T01:48:42.067 に答える