时间戳

首页 > 解决方案 > 如何将按钮与文本区域对齐？

html - 如何将按钮与文本区域对齐？

问题描述

我想将我的按钮与文本区域水平对齐，就像这张图片 这个

当前代码：

<div class="container">
   <div class='row'>
    <div  class="col-sm-1">
<img style="border-radius:50%;width:70px;height:70px;" src="https://images.discordapp.net/avatars/<%=user.id%>/<%=user.avatar%>.png?size=512">      
     </div>
     <div  class="col-sm-11">
     <textarea style='width:70%;height:100%' placeholder='Leave a review for this shop'></textarea>
     </div>
     <div  style="margin-top:5px;margin-bottom:5px;width:70%;display: flex;justify-content: space-between">
       <div>
         <span class="review" data-rating="0"></span>
         <br>
         Please make sure to check our review guidelines before posting.
       </div> 
       <button class="button_div" style="width:auto;display:block;margin-left:  auto;margin-right: 0;" >Post Review</button>
     </div>
  </div>
  </div>

标签： htmlcssstyles

解决方案

总屏幕大小为 12。你给了图像 col-sm-1，你给了占据整个列的文本字段 col-sm-11，你必须将文本字段的 col-sm-11 减少到别的东西所以预览底部可以适合。或者您可以将预览按钮添加到与文本字段相同的 div 中。

推荐阅读