如何对齐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

您已设置容器width的{​​{1}}，但尚未指定div，因此您的填充不会占用。我在下面提供了一个示例，以便您可以 直观 查看正在发生的事情......

http://jsfiddle.net/g6JSU/

以下是按钮与垂直中心对齐的可能解决方案：

http://jsfiddle.net/g6JSU/1/

Answer 2

它与textarea不相邻的原因是因为包含文本区域的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>

Answer 3

试试这个

.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 style="float: left; margin-top: 20px;" type='submit' value='Add Comment'/> 
   </div>
 </div>