提交div没有出现在底部
[英]Submit div not appearing at the bottom
问题描述
I am not able to place the submit button at the bottom of the Webpage. 
我无法将“提交”按钮放在网页的底部。 I have placed the listDiv and DropDwnDiv inline to each other. 我已经将listDiv和DropDwnDiv彼此内联。 If i remove the float left and float right property then i see that submit button comes at the bottom. 如果我删除左浮动和右浮动属性，那么我看到提交按钮位于底部。 What i am missing here? 我在这里想念什么？ Following is my First part of code. 以下是我的第一部分代码。 Any kind of input/feedback is really appreciated. 任何类型的输入/反馈都非常感激。 Dividing my code into two parts head and body, as stack-overflow doesn't let me post the code if the contents of the post are more code and less text. 将我的代码分为头部和正文两部分，因为如果帖子内容多了，文本少了，则堆栈溢出使我无法发布代码。
h1 {
padding : 10px 40px 10px 40px;
width: 1000px;
background: grey;
font-size: 40;
font-family: times-roman;
margin:70px;
}
p {
color:black;
text-align:center;
}
ol {
background:#ff9999;
width: 1000px;
padding : 40px;
margin : 70px;
font-family: Arial;
font-size: 20;
}
#MainDiv {
background: grey;
padding: 40px;
margin: 70px;
font-size:20;
width: 1000px;
height: 500px;
}
#UnameDiv {
background: grey;
display: block;
text-align: center;
font-size:20;
padding-top: 10px;
padding-bottom: 10px;
}
#textareaDiv {
background: grey;
display : block;
text-align:center;
padding-bottom: 10px;
}
#listDiv {
float: right;
background:grey;
font-size: 15;
padding: 30px;
margin-top: 70px;
margin-right: 70px;
}
#DropDwnDiv {
float : left;
background:grey;
font-size: 15;
padding: 30px;
margin-top: 70px;
margin-left: 70px;
}
#subDiv {
background:grey;
float: initial;
margin-top: 20px;
display:block;
text-align: center;
}
2 个解决方案
解决方案1
3 已采纳 2018-06-18 06:52:18
Add this style to the paragraph that contains the submit button. 将此样式添加到包含“提交”按钮的段落中。
<p style="overflow: auto; width: 100%;"> <input type="submit" name="submit" value="SUBMIT"> </p>
解决方案2
1 2018-06-18 06:58:56
Please follow these coding style : 请遵循以下编码样式：
- input tag is a self closing tag 输入标签是自闭标签
- when ever you are using
float:***, always try to clear itclear: both每当您使用float:***，请始终尝试将其clear: both - Don't use p tag always 不要总是使用p标签
Use <br style="clear: both;" /> 使用<br style="clear: both;" /> <br style="clear: both;" /> before the submit button <br style="clear: both;" />提交按钮之前
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> h1 { padding : 10px 40px 10px 40px; width: 1000px; background: grey; font-size: 40; font-family: times-roman; margin:70px; } p { color:black; text-align:center; } ol { background:#ff9999; width: 1000px; padding : 40px; margin : 70px; font-family: Arial; font-size: 20; } #MainDiv { background: grey; padding: 40px; margin: 70px; font-size:20; width: 1000px; height: 500px; } #UnameDiv { background: grey; display: block; text-align: center; font-size:20; padding-top: 10px; padding-bottom: 10px; } #textareaDiv { background: grey; display : block; text-align:center; padding-bottom: 10px; } #listDiv { float: right; background:grey; font-size: 15; padding: 30px; margin-top: 70px; margin-right: 70px; } #DropDwnDiv { float : left; background:grey; font-size: 15; padding: 30px; margin-top: 70px; margin-left: 70px; } #subDiv { background:grey; float: initial; margin-top: 20px; display:block; text-align: center; } </style> </head> <body> <h1 id="test"> <p> THIS IS <strong>MY</strong> WEBPAGE </p> </h1> <ol> <li> 'ZX14R'</li> <li>'MULTISTRADA 1200S'</li> <li>'TRIUMP TIGER 1200'</li> </ol> <div id='MainDiv'> <form action="xyz.php", method="get"> <div id='UnameDiv'> <p> USERNAME:- <input type="label" placeholder='ENTER USERNAME' name="label" /> </p> <p> PASSWORD:- <input type="password" value='*****' name="passwd" /> </p> </div> <div id='textareaDiv'> <textarea rows="5" cols="35" placeholder= "ENTER DESCRIPTION HERE"></textarea> </div> <div id='DropDwnDiv'> <p> <b> WHICH CITY YOU BELONG TO</b> </p> <input type="radio" name="radio" value="BANGALORE" checked/>BANGALORE <br> <input type="radio" name="radio" value="MUMBAI"/>MUMBAI <br> <input type="radio" name="radio" value="DELHI"/>DELHI </div> <div id='ListDiv'> <b>SELECT YOUR FAV CINEMA TYPE</b> <select> <option> 'PVR CINEMAS'</option> <option> 'INOX CINEMAS' </option> <option>'FAME CINEMAS'</option> </select> </div> <br style="clear: both;" /> <div id='subDiv'> <input type="submit" name="submit" value="SUBMIT"/> </div> </form> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.