我有一个名为“选择”的按钮和一个名为“ Files（Java）”的文本区域。如何将按钮对准名为Files（java）的文本区域的右侧。
<!DOCTYPE html>
<html class="jelly-page">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/encstyle.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-wysihtml5.css" />
<style>
.bd-mid-top{
width:50px;
}
#form{
margin: 0 auto;
width:250px;
}
.fileter-wrap .form-group{margin-bottom:1px;}
.fileter-wrap .table{background:none;}
.fileter-wrap .table .control-label{ text-align:right; margin-bottom:1px; font-weight:600; display:block; line-height:11px;}
.control-label .doc-att{}
.control-label .doc-att input[type="checkbox"]{margin-top:0;}
.fileter-wrap{padding:2px 15px;}
.fileter-wrap .table > tbody> tr > td{padding:4px 4px; vertical-align:middle;}
.fileter-wrap .table > tbody> tr > td.v-mid{vertical-align:middle;}
.table{border-collapse: inherit!important;}
.dropbtn:hover, .dropbtn:focus {
/* background-color: #2980B9; */
cursor:pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd}
.dropdown-content a:hover {background-color: #ddd}
.show {display:block;}
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.tabs-wrap > ul > li.active a{background: #fff !important;border-bottom-color: #fff !important;}
</style>
</head>
<body>
<div class="tabs-wrap left relative grey-bg" id="pay-post">
<div class="clearfix spacer10"></div>
<ul class="nav mt12 pull-right">
<li class="active"><a href="#" data-toggle="tab" data-target="#patbase" onclick="">Tab 1</a></li>
<li><a href="#" data-toggle="tab" data-target="#sumbase" onclick="">Tab 2</a></li>
</ul>
<div class="clearfix"></div>
<div class="tab-content">
<div class="tab-pane active" id="patbase">
<div class="nopadbot grey-bg mt3">
<div class="fileter-wrap grey-bg" >
<div class="clearfix spacer10"></div>
<div id="form" class="" style="width:70% !important;">
<div class="">
<div class="" style="">
<div class="col-sm-12 nopadding">
<div class="doc-att fileter-wrap grey-bg txtnormal pad15">
<div class="form-group">
<label class="col-sm-2 control-label nopadding">Source Version</label>
<div class="col-sm-4 nopadright">
<select id="clinicalLvl" name="clinicalLvl" class="form-control input-sm">
<option value = "2">V11</option>
<option value = "3">11i</option>
<option value = "4">Tag Branch</option>
</select>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix spacer10"></div>
<div class="form-group">
<label class="col-sm-2 control-label nopadding">Files (Java)</label>
<div class="col-sm-10 nopadright">
<textarea rows="10" cols="70">
</textarea>
</div>
<div class="col-sm-14 nopadright">
<button type="button" class="btn btn-blue btn-sm btn-xs" onClick="">Select</button>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix spacer10"></div>
<div class="form-group">
<label class="col-sm-2 control-label nopadding">Files (JSP/JS)</label>
<div class="col-sm-10 nopadright">
<textarea rows="10" cols="70">
</textarea>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix spacer10"></div>
<div class="form-group">
<label class="col-sm-2 control-label nopadding">Comments</label>
<div class="col-sm-10 nopadright">
<textarea rows="10" cols="70">
</textarea>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix spacer10"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div style="width: 100%" class="modal-footer bd-mid-top grey-bg nomargin">
<button type="button" class="btn btn-blue btn-sm btn-xs" onClick="">Submit</button>
</div>
</div>
</div>
<div class="tab-pane " id="sumbase">
<div class="nopadbot grey-bg mt3">
<div class="fileter-wrap grey-bg" >
<div class="clearfix spacer10"></div>
<div id="form" class="" style="width:70% !important;">
<div class="">
<div class="" style="">
<div class="col-sm-12 nopadding">
<div class="doc-att fileter-wrap grey-bg txtnormal pad15">
<div class="form-group">
<label class="col-sm-2 control-label nopadding">Source Version</label>
<div class="col-sm-4 nopadright">
<select id="clinicalLvl" name="clinicalLvl" class="form-control input-sm">
<option value = "2">V11</option>
<option value = "3">11i</option>
<option value = "4">Tag Branch</option>
</select>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix spacer10"></div>
<div class="form-group">
<label class="col-sm-2 control-label nopadding">Change Log</label>
<div class="col-sm-10 nopadright">
<textarea rows="10" cols="70">
</textarea>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix spacer10"></div>
<div class="clearfix spacer10"></div>
<div class="form-group">
<label class="col-sm-2 control-label nopadding">Comments</label>
<div class="col-sm-10 nopadright">
<textarea rows="10" cols="70">
</textarea>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix spacer10"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div style="width: 100%" class="modal-footer bd-mid-top grey-bg nomargin">
<button type="button" class="btn btn-blue btn-sm btn-xs" onClick="">Submit</button>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/floatThead.js"></script>
<script src="js/datatable.js"></script>
<script src="js/jquery-ui-timepicker-addon.js"></script>
<script src="js/jquery-ui-sliderAccess.js"></script>
<script src="js/main.js"></script>
</body>
</html>
答案 0 :(得分：0)
.btn btn-blue btn-sm btn-xs,.form-group{
float:left;
}
Example :
<div class="wrapper">
<div class="left"> ... </div>
<div class="right"> ... </div>
</div>
.left, .right {
float:left;
}
答案 1 :(得分：0)
很难理解按钮的位置。
我试图了解你想要什么。
<div class="form-group">
<label class="col-sm-2 control-label nopadding">Files (Java)</label>
<div class="col-sm-10 nopadright">
<textarea rows="10" cols="70">
</textarea>
<button type="button" class="btn btn-blue btn-sm btn-xs" onClick="">Select</button>
</div>
<div class="col-sm-14 nopadright">
</div>
<div class="clearfix"></div>
</div>
答案 2 :(得分：0)
<div class="form-group">
<label class="col-sm-2 control-label nopadding">Files (Java)</label>
<div class="col-sm-10 form-inline">
<textarea rows="10" cols="70">
</textarea>
<button type="button" class="btn btn-blue btn-sm btn-xs" onClick="">Select</button>
</div>
<div class="col-sm-14 nopadright">
</div>
<div class="clearfix"></div>
</div>