0

我无法让 img 元素移动到左侧。left: 0px 属性没有做任何事情。事实上，我似乎无法移动#top div 内的任何东西来移动。

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% 确定要如何定位。但是添加 adisplay: block;和 a float: left;to#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 回答