css - 如何在 DIV 中对齐按钮

Question

我敢肯定这会非常简单，但无论如何...我正在尝试显示一个文本区域，其右侧有一个按钮，类似于单击“添加”时 StackOverflow 显示带有按钮的评论字段评论链接...我遇到的问题是按钮对齐；它似乎在其 div 的右上角对齐(见图)，我想在左下角对齐它。我试过使用 text-align、align，没有任何方法可以移动那个讨厌的按钮，我使用 padding-top 将按钮向下移动, 但 padding-right 似乎没有效果，但必须有比填充更好的方法。我还需要它是跨浏览器兼容的。

这是我正在使用的 html/css...

.newComment {
  position: relative;
  width:475px; 
  background-color:WHITE;
}


 <div class='newComment'>
   <div style='float:left;width:375px;'>
     <textarea style='border:1px solid #888;overflow:auto' rows='3' cols='40'>comments </textarea>
   </div> 
   <div style='float:left;width:75px;'> 
     <input type='submit' value='Add Comment'/> 
   </div>
 </div>

Answer 1

之所以没有和textarea相邻是因为包围text area的div太大了。如果您检查 Chrome 上的元素，您会注意到所有元素的位置。

如果您想让它们粘在一起，我建议您不要将它们放在单独的 div 中。

<style>
    .newComment {
        position: relative;
        width: 475px; 
        background-color: white;
    }
</style>

 <div class='newComment'>
     <textarea style='border:1px solid #888; overflow:auto' rows='3' cols='40'>comments</textarea>
     <input type='submit' value='Add Comment' /> 
 </div>