我正在从事这个学生档案项目。它处于设计阶段。我面临的问题是“提交”按钮没有出现在页面底部。而是它显示在页面的第一部分中。你能帮我吗？
最好的祝福，
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/