我如何将img定位在正确的位置

Question

我做了一些导航。如果单击加号，将启动动画并打开下拉菜单。

但是，我不知道如何使用css定位元素。我试过各种各样的组合。有人知道我做错了什么吗？

这是CSS：

body {
    background-image: url(bg.png);
    background-size: cover;
    background-repeat: no-repeat;
}
html,body {
    height: 100%;
}
.aspectwrapper {
    display: inline-block;
/* shrink to fit */
    width: 100%;
/* whatever width you like */
    position: relative;
/* so .content can use position: absolute */
}
.aspectwrapper::after {
    padding-top: 56.25%;
/* percentage of containing block _width_ */
    display: block;
    content: '';
}
.content {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
/* follow the parent's edges */
    outline: thin dashed green;
/* just so you can see the box */
}
#links {
    position: relative;
    left: 300px;
}

"links"div是整个导航部分所在的div。我想我需要定位那个部门。

这是HTML代码：

<div class="aspectwrapper">
    <div class="content">
        <div class="links">
            <ul>
                <li><a href="#ontwerp"><img height="20" src="1.png"></a></li>
                <li><a href="#object"><img height="20" src="2.png"></a></li>
                <li><a href="#bouwkunde"><img height="20" src="3.png"></a></li>
                <li><a href="#contact"><img height="20" src="4.png"></a></li>
                <li><a href="#winkel"><img height="20" src="5.png"></a></li>
            </ul>
        </div>
    </div>
</div>

我希望任何人都能帮助我

Answer 1

在CSS中，您已经将链接类定义为ID。因此，更改：

#links {
    position: relative;
    left: 300px;
}

至

.links {
    position: relative;
    left: 300px;
}

小提琴在这儿：http://jsfiddle.net/5Ejgx/

希望能有所帮助！