如何在文本区域输入的右侧对齐按钮？

时间：2018-07-16 17:31:50

标签： html css css3 jsp

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

3 个答案:

答案 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)

使用表单内联引导类

将nopadright替换为表单内联

<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>
相关问题
最新问题