html - 如何让提交按钮出现在页面下方

标签 html css

我正在做这个学生资料元素。它处于设计阶段。我面临的问题是提交按钮没有出现在页面底部。相反，它出现在页面的第一部分。你能帮我吗？ 最好的问候，

input[type="button"], input[type="submit"], input[type="reset"], button {
    cursor: pointer;
}
.container{
	width:700px;
	margin:0 auto;
	
}
label{
	display:block;
}

.header{
	
	background: #2196F3;
	border: 1px solid #CCCCCC;
	border-radius: 2px;
	border-width: 1px;
	color: #fff;
	font-family: Roboto,sans-serif;
	font-weight: bold;
	font-size: 20px;
	margin: 1px auto;
	padding: 10px;
	display:block;
	text-align:center
	}
.under_header{
	font-family: Roboto,sans-serif;
	padding:10px;
	font-size: 15px;
	
}
.segment_header {
	text-align:Left;
    width: auto;
    margin: 1px;
    color: #FFF;
    background: #2196F3 none repeat scroll 50% 50% / cover;
    border-radius: 4px;
	font-family:Roboto,sans-serif;
	font-weight:bold;
	font-size:18px;
	padding:0px 0px 0px 10px;
}
.question{
	padding: 10px;
    margin-bottom: 1px;
    margin-left: 1px;
    float: left;
    display: block;
	font-weight: bold;
}
.question .top_question{
	display: block !important;
	min-height: 19px;
}
.question .text_field{
	background: #FAFAFA none repeat scroll 0% 0%;
    border: 1px solid #CCC;
    border-radius: 2px;
    color: #333;
    font-family: "Roboto",sans-serif;
    font-size: 13px;
    margin: 1px 0px;
    padding: 10px;
	display:block;
}
.question .drop_down {
    background: #FAFAFA none repeat scroll 0% 0%;
    border: 1px solid #CCC;
    border-radius: 2px;
    color: #333;
    font-family: "Roboto",sans-serif;
    font-size: 13px;
    margin: 1px 0px;
    padding: 9px;
	display:block;
}
.question .item_anchor {
    position: relative;
    top: -15px;
}

.full_width {
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-top: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    width: 100%;
}
.required .icon{
	background-image: none;
	background-position: left;
	background-repeat: no-repeat;
	font-size: 13px;
	padding-left: 14px;
}
.question .matrix {
    border-collapse: collapse;
    margin-right: 3px;
    margin-top: 1px;
}
.form_table{
	width: 650px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 4px;
	border: 0px solid #CCCCCC;
	background: #FFFFFF;
	background-size: cover;
	color: #333333;
	overflow: hidden;
	box-shadow: 0 1px 6px rgba(0,0,0,0.30);
}
.form_table table {
    font-size: 1em;
}
.question .matrix th{
	color: #FFFFFF;
	background: #64B5F6;
	padding: 5px;
	font-weight: bold;
	text-align: center;
	vertical-align: bottom;
}

.question .matrix td{
	padding: 5px;
	text-align: center;
	white-space: nowrap;
	height: 26px;
	
}

.question .matrix td.question{
	
	font-weight: normal;
}

.question .matrix .multi_scale_sub th{
	font-weight: normal;
	border-top: 1px solid #CCCCCC !important;
	background: #999999;
}

.question .matrix .multi_scale_break{
	border-right: 1px solid #CCCCCC;
}

.question .matrix_row_dark td{
	color: #333333;
	background: #FAFAFA;
}

.question .matrix_row_dark td.question{
	color: #333333;
	background: #FAFAFA;
}

.question .matrix_row_light td{
	color: #333333;
	background: #FFFFFF;
}

.question .matrix_row_light td.question{
	color: #333333;
	background: #FFFFFF;
}

.question .rating_ranking td{
	padding: 5px;
}

.question .scroller{
	border: 1px solid #CCCCCC;
}

.highlight{
	background: #FFF9C4 !important;
}

tr.highlight td{
	background: #FFF9C4 !important;
}

.outside{
	color: #333333;
}

.outside_container{
	
	width: 650px;
	padding: 1em 0;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	color: #333333;
}
.submit_button {
    display: inline-block;
    cursor: pointer;
    margin: 5px;
    padding: 10px 20px;
    font-weight: bold;
    text-align: center;
    border-width: 1px;
    transition: background 0.1s ease-out 0s;
    white-space: normal;
}

.outside_container .submit_button{
	color: #FFFFFF !important;
	background: #FF9800;
	background-size: auto;
	border-style: none;
	border-width: 1px;
	border-color: #FFFFFF;
	border-radius: 4px;
	text-align: center;
	font-family: 'Roboto',sans-serif;
	font-size: 14px;
	font-weight: bold;
	min-width: 30%;
	padding: 10px 20px;
	text-transform: uppercase;
	box-shadow: 0 1px 6px rgba(0,0,0,0.30);
}
.buttons_reverse {
    	direction: rtl;
    text-align: center;
}
.outside_container .submit_button:hover{
	background: #F57C00;
	border-color: #BBBBBB;
	background-size: auto;
}
.progressBarWrapper{
	border-radius: 4px;
	background: #FFFFFF;
	background-size: cover;
	border-color: #CCCCCC;
}
.progressBarBack{
	color: #FFFFFF;
	background-color: #FF9800;
}
.progressBarFront{
	color: #333333;
}

.ui-widget{
	font-family: 'Roboto',sans-serif;
}
.invalid{
	background: #FFEEEE;
}
.invalid .invalid_message{
	color: #FF0000;
	background: #FFEEEE;
	border: 1px solid #FF0000;
	border-radius: 2px;
}
.form_table.invalid{
	border: 2px solid #FF0000;
}
.invalid .matrix .invalid_row{
	background: #FFEEEE;
}
<form id="FSform" method="post" style="">
<div id="q23" class="question">
<a class="item_anchor" name="ItemAnchor3"></a>
<label class="question top_question" for="RESULT_TextField-3">First Name</label>
<input name="RESULT_TextField-3" class="text_field" id="RESULT_TextField-3" size="22" maxlength="255" value="" type="text">
</div>
<div id="q24" class="question">
<a class="item_anchor" name="ItemAnchor4"></a>
<label class="question top_question" for="RESULT_TextField-4">Last Name</label>
<input name="RESULT_TextField-4" class="text_field" id="RESULT_TextField-4" size="22" maxlength="255" value="" type="text">
</div>
<div id="q49" class="question">
<a class="item_anchor" name="ItemAnchor5"></a>
<label class="question top_question" for="RESULT_RadioButton-5">Class</label>
<select id="RESULT_RadioButton-5" name="RESULT_RadioButton-5" class="drop_down">
<option></option>
<option value="Radio-0">AS Level</option>
<option value="Radio-1">A Level</option>
</select>
</div>

<div id="q21" class="question">
<a class="item_anchor" name="ItemAnchor6"></a>
<label class="question top_question" for="RESULT_RadioButton-5">Gender</label>
<select id="RESULT_RadioButton-5" name="RESULT_RadioButton-5" class="drop_down">
<option></option>
<option value="Radio-0">Male</option>
<option value="Radio-1">Female</option>
</select>
</div>

<div id="q12" class="question">
<a class="item_anchor" name="ItemAnchor7"></a>
<label class="question top_question" for="RESULT_RadioButton-7">Group</label>
<select id="RESULT_RadioButton-7" name="RESULT_RadioButton-7" class="drop_down">
<option></option>
<option value="Radio-0">Engineering</option>
<option value="Radio-1">Medical</option>
<option value="Radio-2">General</option>
</select>
</div>

<div id="q25" class="question">
<a class="item_anchor" name="ItemAnchor8"></a>
<label class="question top_question" for="RESULT_TextField-8">Street Address</label>
<input name="RESULT_TextField-8" class="text_field" id="RESULT_TextField-8" size="52" maxlength="255" value="" type="text">
</div>

<div id="q27" class="question">
<a class="item_anchor" name="ItemAnchor9"></a>
<label class="question top_question" for="RESULT_TextField-9">City</label>
<input name="RESULT_TextField-9" class="text_field" id="RESULT_TextField-9" size="30" maxlength="255" value="" type="text">
</div>

<div id="q28" class="question">
<a class="item_anchor" name="ItemAnchor10"></a>
<label class="question top_question" for="RESULT_RadioButton-10">Province/State</label>
<select id="RESULT_RadioButton-10" name="RESULT_RadioButton-10" class="drop_down">
<option></option>
<option value="Radio-0">Punjab</option>
<option value="Radio-1">KPK</option>
<option value="Radio-2">Sindh</option>
<option value="Radio-3">Baluchistan</option>
</select>
</div>

<div id="q30" class="question">
<a class="item_anchor" name="ItemAnchor11"></a>
<label class="question top_question" for="RESULT_TextField-11">Phone Number</label>
<input name="RESULT_TextField-11" class="text_field" id="RESULT_TextField-11" size="34" maxlength="255" value="" type="text">
</div>

<div id="q31" class="question">
<a class="item_anchor" name="ItemAnchor12"></a>
<label class="question top_question" for="RESULT_TextField-12">Email Address</label>
<input name="RESULT_TextField-12" class="text_field" id="RESULT_TextField-12" size="52" maxlength="255" value="" type="email">
</div>




<div class="outside_container">
<div class="buttons_reverse"><input name="Submit" value="Submit" class="submit_button" id="FSsubmit" type="submit"></div></div>

最佳答案

在 css 中为 outside_container 类添加以下内容

clear : both;

这应该可以完成工作。

关于html - 如何让提交按钮出现在页面下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33992258/

上一篇：javascript - l = e ('<div class="vSlide-markers"></div>'); - 如何通过 javascript 将此 div 放入父级中？

下一篇：html - 将 dom 元素与另一个固定顶部元素的底部对齐

相关文章：

html - 是否可以在 html5 中验证 input=file 的大小和类型

jquery - 如何为文本添加滚动视差效果

javascript - 文本未标记

jquery - iframe 和它们之间的通信

javascript - 用 div 替换框架

javascript将多个数组转换为json

javascript - 根据值和父 ID 选择复选框

html - 滚动时内容重叠

CSS水平DIV滚动

javascript - 可滚动的表体和固定表头

©2024 IT工具网  联系我们