用于在两个按钮标签之间留出空间的CSS

Question

我想在div标签的两个按钮之间留出一些空间。我尝试了很多但仍有问题。我创建了登录div，它有两个按钮。登录div位于标题div中，我标记为＆＃39; h＆＃39;。我想在两个按钮之间留出一些空格，我将其舍入为绿色。但是现在我以红色绘制了当前显示的位置。

＆＃13;

＆＃13;

.login{
    margin:0;
    padding:0px 10px 10px 0px;
    text-align:right;
    width:40%;
    position:absolute; 
  right:0;
  bottom:0;

}
.login button
{
   padding:0px 10px 10px 0px;   
 }

＆＃13;

<div class="header">
   <div class="login">
        <button class="add">login</button>
        <button class="upload">Enquiry</button>
   </div>  <!--end of login div -->
</div>  <!--end of header div -->

＆＃13;

＆＃13;

＆＃13;

Answer 1

 .login button
 {
    margin-left:10px;   
 }

添加一些左边距？

Answer 2

好吧试试这个......我希望这会很好......

  .login button
 {
  margin-left:10px;

 padding:0px 10px 10px 0px;   
 }

这是小提琴http://jsfiddle.net/41fhejfd/4/

Answer 3

喜欢这种类型

.login{
    margin:0;
    padding:0px 10px 10px 0px;
    text-align:right;
    width:40%;
    position:absolute; 
  right:0;
  bottom:0;

}
.login button
{
   padding:0px 10px 10px 0px;   
   margin-left: 10px;
 }

<div class="header">
   <div class="login">
        <button class="add">login</button>
        <button class="upload">Enquiry</button>
   </div>  <!--end of login div -->
</div>  <!--end of header div -->

Answer 4

你可以这样做：

.login button {
   margin-left: 30px;  
}

或者你可以在按钮周围添加一个容器，给它一个宽度，然后将它们浮动到left和right两侧。

HTML：

<div class="header">
   <div class="login">
       <div class=logincontainer>
           <button class="add">login</button>
           <button class="upload">Enquiry</button>
       </div>
   </div>  <!--end of login div -->
</div>  <!--end of header div -->

CSS：

.logincontainer {
    width: 200px;
}
.add {
    float: left;
}
.upload {
    float: right;
}