Question

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

img标签位于顶部。我省略了其余的网页，但我希望这已经足够了。

HTML code：

<!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;
}

Answer 1

您的text-align:center元素中的div似乎就是问题所在。尝试覆盖#top中的那个，我认为它将按照您的预期开始行动。看到这个小提琴：

http://jsfiddle.net/3KyrW/

Answer 2

您的#top应该positive: relative，然后您的#top img应该有position: absolute ...这会在您的标题中移动图片。

Answer 3

我不是100％确定如何尝试定位。但是向display: block;添加float: 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;
}

html元素没有响应定位

3 个答案: