以下是<body>标签中的HTML内容
<div class="container mt-5 pt-2 pb-4" id="container-primary">
<div class="container mt-3" id="container-secondary"><h3>Welcome</h3><br> Please Enter your <strong>Password</strong> to view the question</br>
</div>
<div class="container pt-2" id="container-tertiary">
<form method="post" id="pwd-form" autocomplete="off">
<input type="password" class="form-control mx-auto" id="pwd" placeholder="Password" name="pwd" spellcheck="false"></input>
<div class="container" id="pwd-error-container"><?php
session_start();
if (isset($_SESSION['wrongpwd'])){
echo $_SESSION['wrongpwd'];
unset($_SESSION['wrongpwd']);
} ?>
</div>
<div class="container mx-auto" id="button-container">
<input type="submit" class="btn btn-info float-left" id="forgotpwd" value="Forgot Password">
<input type="button" class="btn btn-info float-right" id="submit-button" value="Validate" disabled>
</div>
</form>
<form>内部有两个按钮。但当我在浏览器中inspect网页时，我注意到这两个按钮不在<form>内。究竟是什么原因导致了问题？
以下是css：
#container-primary{
background-color: ;
}
#container-secondary{
background-color: ;
text-align: center;
}
#container-tertiary{
background-color: ;
text-align: center;
margin-top: 30px;
}
#pwd-form{
background-color: green;
}
#pwd{
width: 40%;
min-width: 300px;
font-size: 18px;
padding-top: 1px;
padding-bottom: 1px;
}
#pwd-error-container{
background-color: ;
font-size: 19px;
color: rgb(217, 48, 37);
font-weight: bold;
}
#button-container{
margin-top: 25px;
width: 40%;
min-width: 300px;
margin-bottom: 25px;
}
#question-form{
opacity: 0.3;
}
#answer{
width: 40%;
min-width: 300px;
font-size: 18px;
padding-top: 1px;
padding-bottom: 1px;
margin-top: 5%;
}
</style>```
I don't know where I have gone wrong. Screenshots of the inspection have been given in the comments section.
从按钮中移除左浮动和右浮动class。然后它工作得很好。
<div class="container" id="button-container">
<div class="row">
<div class="mr-auto">
<button type="submit" class="btn btn-info" id="forgotpwd">Forgot Password</button>
</div>
<div class="">
<button type="button" class="btn btn-info" id="submit-button" disabled>Validate</button>
</div>
</div>
</div>
https://jsfiddle.net/Lebxp70k/44/
您的html代码无效。您有不需要的结束标记，并且缺少其他需要的结束标签。这是一个修正版
#container-primary{
background-color: ;
}
#container-secondary{
background-color: ;
text-align: center;
}
#container-tertiary{
background-color: ;
text-align: center;
margin-top: 30px;
}
#pwd-form{
background-color: green;
}
#pwd{
width: 40%;
min-width: 300px;
font-size: 18px;
padding-top: 1px;
padding-bottom: 1px;
}
#pwd-error-container{
background-color: ;
font-size: 19px;
color: rgb(217, 48, 37);
font-weight: bold;
}
#button-container{
margin-top: 25px;
width: 40%;
min-width: 300px;
margin-bottom: 25px;
}
#question-form{
opacity: 0.3;
}
#answer{
width: 40%;
min-width: 300px;
font-size: 18px;
padding-top: 1px;
padding-bottom: 1px;
margin-top: 5%;
}<div class="container mt-5 pt-2 pb-4" id="container-primary">
<div class="container mt-3" id="container-secondary">
<h3>Welcome</h3><br>
Please Enter your <strong>Password</strong> to view the question<br>
</div>
<div class="container pt-2" id="container-tertiary">
<form method="post" id="pwd-form" autocomplete="off">
<input type="password" class="form-control mx-auto" id="pwd" placeholder="Password" name="pwd" spellcheck="false">
<div class="container" id="pwd-error-container"><?php
session_start();
if (isset($_SESSION['wrongpwd'])){
echo $_SESSION['wrongpwd'];
unset($_SESSION['wrongpwd']);
} ?>
</div>
<div class="container mx-auto" id="button-container">
<input type="submit" class="btn btn-info float-left" id="forgotpwd" value="Forgot Password">
<input type="button" class="btn btn-info float-right" id="submit-button" value="Validate" disabled>
</div>
</form>
</div>
</div>这是您的html。您可以在代码片段中清楚地看到表单标记是红色的，即它没有关闭。问题在于你的<br>以及您的<输入>标签<br>应该只是<br>并且<输入>标记不会以</结束输入>
<div class="container mt-5 pt-2 pb-4" id="container-primary">
<div class="container mt-3" id="container-secondary"><h3>Welcome</h3><br> Please Enter your <strong>Password</strong> to view the question</br>
</div>
<div class="container pt-2" id="container-tertiary">
<form method="post" id="pwd-form" autocomplete="off">
<input type="password" class="form-control mx-auto" id="pwd" placeholder="Password" name="pwd" spellcheck="false"></input>
<div class="container" id="pwd-error-container"><?php
session_start();
if (isset($_SESSION['wrongpwd'])){
echo $_SESSION['wrongpwd'];
unset($_SESSION['wrongpwd']);
} ?>
</div>
<div class="container mx-auto" id="button-container">
<input type="submit" class="btn btn-info float-left" id="forgotpwd" value="Forgot Password">
<input type="button" class="btn btn-info float-right" id="submit-button" value="Validate" disabled>
</div>
</form>