1. 首页
  2. 问题列表
  3. HTML按钮不显示/元素相互堆叠
提问者：小点点

HTML按钮不显示/元素相互堆叠


我遵循了一个表单的教程（让它看起来更专业），我仔细地遵循了每一步（我搞错了一些东西，但是我找不到），现在我所有的“字段”都堆叠在一起了。我有一个php页面，我做了一个表单，然后如果所有的信息被填写，用户按“提交”按钮，然后它应该发送到我和他们的电子邮件。它是有效的，但当我开始遵循这个教程/指南，按钮消失了，当我试图在页面上找到它时，我看不到它/点击它或其他任何东西。通过一些技巧，我可以看到按钮的轮廓，但看不到实际的按钮（opera中有一个函数，我认为许多其他浏览器在浏览页面上的元素时，如果你在源代码中点击其中的一个元素，它会在页面上突出显示它）。下面是源代码，我唯一想要的是出现在文本字段下的按钮和文本字段不要堆叠在彼此的顶部，我将只包括html，而不是SMTP的php代码。

null

<!DOCTYPE html>
<html>
<head>
<title>Enroll</title>
<link rel="icon" href="mail.png">
</head>
<style>

body{
background-color: white;
font-family: sans-serif;
justify-content:space-around;
align-items:center;
flex-direction:column;
height:100%;;
}

.form{
overflow:hidden;
width:75%;
position:absolute;
left:10%;
transition: all 0.3 ease;
height:50px;
}

.form label{
position:absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
pointer-events: none;
border-bottom: 1px solid black;
transition: 0.3 ease;
}

.form label::after{
    content: "";
    position:absolute;
    left:0px;
    buttom:0px;
    height:100%;
    width:100%;
    border-bottom: 3px solid #5fa8d3;
    transform translateX(-100%);
}

.button{
width:400px;
height:30px;
background-color:blue;
}

.form input{
width:100%;
height:100%;
color: #595f6e;
padding-top: 20px;
border: none;
transition: 0.3s ease;
}

.content-name {
position:absolute;
bottom:5px;
left:0px;
transition: all 0.3 ease;
}

.form input:focus + .label-name .content-name,
.form input:valid + .label-name .content-name {
 transform: translateY(-150%);
 font-size: 14px;
 color: #5fa8d3;
}

.form input:focus{
    
}
</style>

<body>
<div align="center"> 
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <form class="form" action="" method="post">
    
    <input type="text" name="email" required />
    <label for="email" class="label-name">
        <span class="content-name">Email</span>
    </label>
    <br>
    
    <input type="text" name="first_name" required />
    <label for="first_name" class="label-name">
        <span class="content-name">First Name</span>
    </label>
    <br>
    
    
    <input type="text" name="last_name">
    <label for="last_name" class="label-name">
        <span class="content-name">Last Name</span>
    </label>
    <br>
    
    
    <br>
          <input style="color:blue;" onClick="return empty()" type="submit" name="submit" value="Submit"></br>
    </form>
</div>
    
</body>
</html>

null


共1个答案

匿名用户

它们都是堆叠的，因为您在/code>上使用了，而没有在它们应该定位的位置上使用正确的父引用。尝试用/code>包装它们，如下面的示例所示，并将添加到该中

null

<!DOCTYPE html>
<html>
<head>
<title>Enroll</title>
<link rel="icon" href="mail.png">
</head>
<style>

body{
background-color: white;
font-family: sans-serif;
justify-content:space-around;
align-items:center;
flex-direction:column;
height:100%;;
}

.form{
overflow:hidden;
width:75%;
position:absolute;
left:10%;
transition: all 0.3 ease;
height:50px;
display: flex;
}
.form .field {
position: relative;
}

.form label{
position:absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
pointer-events: none;
border-bottom: 1px solid black;
transition: 0.3 ease;
}

.form label::after{
    content: "";
    position:absolute;
    left:0px;
    buttom:0px;
    height:100%;
    width:100%;
    border-bottom: 3px solid #5fa8d3;
    transform translateX(-100%);
}

.button{
width:400px;
height:30px;
background-color:blue;
}

.form input{
width:100%;
height:100%;
color: #595f6e;
padding-top: 20px;
border: none;
transition: 0.3s ease;
}

.content-name {
position:absolute;
bottom:5px;
left:0px;
transition: all 0.3 ease;
}

.form input:focus + .label-name .content-name,
.form input:valid + .label-name .content-name {
 transform: translateY(-150%);
 font-size: 14px;
 color: #5fa8d3;
}

.form input:focus{
    
}
</style>

<body>
<div align="center"> 
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <form class="form" action="" method="post">
    <div class="field">
        <input type="text" name="email" required />
        <label for="email" class="label-name">
            <span class="content-name">Email</span>
        </label>
    </div>
    <br>
    <div class="field">
        <input type="text" name="first_name" required />
        <label for="first_name" class="label-name">
            <span class="content-name">First Name</span>
        </label>
    </div>
    <br>
    
    <div class="field">
        <input type="text" name="last_name" />
        <label for="last_name" class="label-name">
            <span class="content-name">Last Name</span>
        </label>
    </div>
    <br>
    
    
    <br>
          <input style="color:blue;" onClick="return empty()" type="submit" name="submit" value="Submit"></br>
    </form>
</div>
    
</body>
</html>

相关问题