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。我想我需要定位那个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/

希望有所帮助！

我该如何定位我的img吧？

1 个答案: