如果調整相應的textarea大小，如何保持按鈕的位置？

Question

我有一個textarea和一個相應的按鈕，可以擴展或壓縮textarea。 它到目前為止工作但我不喜歡按鈕改變它的位置，如果該區域擴大。 如何避免這種情況並將按鈕保持在其初始位置（即textarea的右上角並與其他元素內聯）？

 function resize_textarea(id) { var textarea = $(id); if (textarea.hasClass('compressed')) { textarea.removeClass('compressed').addClass('expanded'); textarea.attr('rows', 10); } else { textarea.removeClass('expanded').addClass('compressed'); textarea.attr('rows', 1); } } 

 .compressed { resize: none; } .expanded { resize: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-xs-3"> <div class="form-group"> <select class="form-control"> <option value="">Select option 1</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> </div> <div class="col-xs-3"> <div class="form-group"> <select class="form-control"> <option value="">Select option 2</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> </div> <div class="col-xs-4"> <div class="input-group"> <textarea class="form-control compressed" id="textarea_id" rows="1" cols="40"></textarea> <span class="input-group-btn"> <button type="button" class="btn btn-primary" onclick="resize_textarea(textarea_id);">resize</button> </span> </div> </div> <div class="col-xs-2"> <button type="button" class="btn btn-primary">add</button> </div> </div> 

Answer 1

您可以將vertical-align: top添加到按鈕周圍的范圍，以使其保留在textarea的右上角。 這也會使您的調整大小按鈕與其旁邊的“添加”按鈕對齊。

 function resize_textarea(id) { var textarea = $(id); if (textarea.hasClass('compressed')) { textarea.removeClass('compressed').addClass('expanded'); textarea.attr('rows', 10); } else { textarea.removeClass('expanded').addClass('compressed'); textarea.attr('rows', 1); } } 

 .compressed { resize: none; } .expanded { resize: none; } #textarea_id + .input-group-btn { vertical-align: top; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-xs-3"> <div class="form-group"> <select class="form-control"> <option value="">Select option 1</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> </div> <div class="col-xs-3"> <div class="form-group"> <select class="form-control"> <option value="">Select option 2</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> </div> <div class="col-xs-4"> <div class="input-group"> <textarea class="form-control compressed" id="textarea_id" rows="1" cols="40"></textarea> <span class="input-group-btn"> <button type="button" class="btn btn-primary" onclick="resize_textarea(textarea_id);">resize</button> </span> </div> </div> <div class="col-xs-2"> <button type="button" class="btn btn-primary">add</button> </div> </div> 

Answer 2

要做到這一點，你只需要添加vertical-align: top的span持有的按鈕。

請注意，您需要確保規則具有足夠高的特異性，以覆蓋現有的vertical-align設置。 您可以通過向其添加多個類選擇器來實現。 在任何可能的情況下都應該避免使用!important 。

另請注意，可以使用不顯眼的事件處理程序和toggleClass()方法來整理JS代碼。 嘗試這個：

 $('.expand').click(function() { $('#textarea_id').toggleClass('compressed').attr('rows', function() { return $(this).hasClass('compressed') ? 1 : 10; }); }); 

 textarea.form-control { resize: none; } .compressed { resize: none; } .expanded { resize: none; } .input-group-btn.top-button { vertical-align: top; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <div class="col-xs-3"> <div class="form-group"> <select class="form-control"> <option value="">Select option 1</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> </div> <div class="col-xs-3"> <div class="form-group"> <select class="form-control"> <option value="">Select option 2</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> </div> <div class="col-xs-4"> <div class="input-group"> <textarea class="form-control compressed" id="textarea_id" rows="1" cols="40"></textarea> <span class="input-group-btn top-button"> <button type="button" class="btn btn-primary expand">resize</button> </span> </div> </div> <div class="col-xs-2"> <button type="button" class="btn btn-primary">add</button> </div> </div>