如何对齐DIV中的按钮 [英] How to align a button inside a DIV

问题描述

我敢肯定这会很简单，但无论如何......我试图在右侧显示一个带有按钮的文本区域，类似于当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 ='添加评论'/> 
< / div> 
< / div> 
  

解决方案

它与textarea不相邻的原因是因为包含文本区域的div太大。如果你检查Chrome上的元素，你会注意到所有的元素。

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

 < style> 
 .newComment {
 position：relative; 
 width：475px; 
背景颜色：白色; 
} 
< / style> 
 
< div class ='newComment'> 
< textarea style ='border：1px solid＃888; overflow：auto'rows ='3'cols ='40'> comments< / textarea> 
< input type ='submit'value ='添加评论'/> 
< / div> 
  

I'm sure this will be ridiculously simple, but whatever... I'm trying to display a text area with a button to its right, similar to how StackOverflow displays a comment field with button when one clicks the 'Add Comment' link...the problem I'm experiencing is with the button alignment; it appears to align at the top right of its div (see image), I want to align it at the bottom left. I've tried using text-align, align, nothing works to move that pesky button, I used padding-top to move the button down, but padding-right appears to have no effect, but there's got to be a better way than padding. I need it to be cross-browser compatible as well.

Here is the html/css I'm using...

.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>

解决方案

The reason why it is not adjacent to the textarea is because the div encompassing the text area is too large. If you inspect element on Chrome, you will notice where all the elements are.

I'd suggest you do not put them in separate divs if you want them stuck together.

<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>

这篇关于如何对齐DIV中的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！