时间戳

首页 > 解决方案 > 如何将按钮对齐到文本区域输入的右侧？

html - 如何将按钮对齐到文本区域输入的右侧？

问题描述

我有一个名为“select”的按钮和一个名为“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>

标签： htmlcssjsp

解决方案

使用表单内联引导类

将 nopadright 替换为 form-inline

<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>

推荐阅读