Question

I have a 3 <a>'s to get the text you want, but it moves with the text that you want to get, it goes up and down with the text:

的位置

它一直在调整它们，我一直试图将它改变一个小时。

这是我的css：

* {
padding: 0;
margin: 0;
}
#nav {
//background-color: #666;
position: fixed;
width: 100%;
background: linear-gradient(#009940, #009900, #009800);
}

#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

#nav li  {
float: left;
}

#nav li a {
display: block;
transition: background-color 0.5s ease;
color: white;
font-size: 16px;
padding: 14px 18px;
text-align: center;
text-decoration: none;
}

#container {
width: 70%;
margin-left: 15%;
vertical-align: top;
height: 140%;
background-color: #e6e6e6;
}

#nav li a:hover {
background-color: #396108;
}

#nav li a img {
position: absolute;
margin-top: -0.4%;
margin-left: -1%;
}


#Text-marge {
margin-left: 30%;
margin-top: 0.2%;
width: 45%;
height: 29.5%;
padding-left: 4px;
background-color: gray;
overflow: hidden;
float: left;
}

#text-marge > p {
margin-left: 5%;
margin-top: 8%;
vertical-align: top;
}

#clicker > p {
display: inline-block;
//position: absolute;
float: left;
vertical-align: top;
}

#clicker {
margin-left: 28%;
margin-top: 12%;
}

#clicker ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

#clicker li  {
float: left;
}

#clicker li a {
display: block;
font-size: 24px;
padding: 14px 18px;
text-decoration: none;
color: white;
float: left;
}

#text {

}

这是我的HTML：

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <title>Homepage</title>
    <script>

    function runButton1() {
    document.getElementById("text").innerHTML = "";
    }

    function runButton2() {
    document.getElementById("text").innerHTML = "b";
    }

    function runButton3() {
    document.getElementById("text").innerHTML = "c";
    }

    </script>

    </head>
    <body>

    <div id="nav">
    <ul>
    <li><a href="/pag2.html">Home</a></li>
    <li><a href="/pag2.html">Interreses</a></li>
    <li><a href="/pag2.html">Groepsleden</a></li>
    <li><a href="/pag2.html">Opleiding</a></li>
    <li><a href="/pag2.html">Fotogalerij</a></li>
    <li style="float: right;"><a style="width: 20px; height: 20px;" href="/index.html"><img src="logo.png"></img></a></li>
</ul>
</div>
<div id="container">
    <img style="margin-top: 10%; margin-left: 5%; width: 25%;" align="middle" src="geslaagd.png"/>
        <h1 style="margin-left: 12%; margin-top: -32%;">Geslaagd!</h1>
    <div id="Text-marge">
        <p id="text">In 2016 ben ik geslaagd en kon ik mijn droom opleiding volgen <br> en die opleiding heet: "Applicatie Ontwikkelaar" <br> ik hou van programmeren en dus vond ik dat het bij mij past <br> daarom had ik zo hard mogelijk gewerkt om het te halen. <br> Nu zit ik in een leuk project team waar je ook over kan lezen op <br> deze site, Kyran, Luuk, Collin, Dewi, Jeremy en Xander <br> zijn mijn teamleden. <br> Ik ben 17 jaar oud</p>
    <div id="clicker">
        <ul>
            <li><a onclick="runButton1()">*</a></li>
            <li><a onclick="runButton2()">*</a></li>
            <li><a onclick="runButton3()">*</a></li>
        </ul>
    </div>
    </div>
    </div>

</body>


</html>

Answer 1

CBroe是正确的卢卡斯。将div #clicker设置为position: absolute;。确保它的父＃text-marge设置为position: relative;。

您可以使用顶部/底部等定位声明为绝对的元素。找出更多here。

同时阅读this关于为什么其父母应该相对定位的原因。

<a> buttons does not stick to its location

1 个答案: