Question

HTML：

<div id="mainSignup">
    <form id="signup">
    <div id="menu">
        <div id="username_enter">
            <label for="username">Username: </label> 
            <input type ="text" id="username" maxlength="10" placeholder="10 Characters Only">
        </div>
        <div id="password_enter">
            <label for="password">Password: </label> 
            <input type ="password" id="password" maxlength="50" placeholder="50 Characters Only">
        </div>          
    </div>
    </form>
</div>

CSS：

    label {
    font-family: "Comic Sans MS", cursive, sans-serif;


}

input {
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 15px;
}

#username_enter {
  padding: 20px;
  position: absolute;
  top: 25%;
  left: 50%;
  margin: -70px 0 0 -170px;

}

#password_enter {
  padding: 10px;
  position: absolute;
  top: 10%;
  left: 53%;
  margin: -70px 0 0 -170px;

}

#username {
    margin-top: 40px;
}

#password {
    margin-top: 160px;
}



#menu {
    border-radius:11px;
    height:300px;
    width:500px;
    border:6px solid black;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    background-color:white;
}

为什么用户名输入不可点击？

即使您使用用户名这个词，它也不可点击。

如果这个问题写得很糟糕，请不要惊讶，因为我只有11岁。

aaaabbbbccccdddddeeeee

Answer 1

您无法与username输入进行交互（无法“点击”），因为它被#password_enter div元素屏蔽。在CSS中添加以下行可以快速解决您的问题：

#username_enter {
  ... your current css rules
  z-index: 99;
}

但是，在这样一个简单的例子中使用这么多absolute并不是一个好主意。请考虑使用普通边距/填充来实现您想要的效果。

Answer 2

因为标签标签不可点击。您必须使用或<button>或<a>

为什么此输入文件无法点击？

2 个答案: