html - 如何对齐两个按钮

Question

我在对齐两个按钮时遇到问题，我想在这张图片上制作类似下载按钮的东西 http://i.stack.imgur.com/MYt2K.png .

我尝试为左键和边距添加填充，但没有成功。

JSFIDDLE

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 

<div class="publish">
                        <button class="btplus"><i class="fa fa-plus-circle"></i></button><button class="publishbt"> PUBLISH </br> NEWS </button>
                    </div>

CSS

.publish{
font-family: 'Roboto', sans-serif;
display:inline-block;
margin-left:80px;
margin-top:12px;
}

    .publishbt{
    background-color:#FF6900;
    border:none;

    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    color:white;
        font-family:'Roboto', sans-serif;

    font-weight:bold;
    padding:5px;

    }
    .btplus{
    background-color:#FF6900;
    border:none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    color:white;
        font-family:'Roboto', sans-serif;
    margin-top:5px;
    padding-bottom:18px;
    font-weight:bold;
    }
    .fa-plus-circle{
    margin-top:10px;
        }

    .buttonsearch{
    height:38px;
    width:100px;
    background-color: #36545f;
    border:none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    }
    .fa-search{
    color:#dbe2e5;
    }

Answer 1

这是一个填充问题。您的按钮元素中有不相等的填充。要使两个按钮的高度相同，您需要使填充相同。

CSS:

.btplus{
   padding:15px 5px; /* no need for a bottom padding. if you want the bottom big, add corresponding padding to your text button too. */ 
vertical-align:top /* to align with the publish button, which has multiple lines*/  
} 
.fa-plus-circle{
margin:0px; /*no need for a margin. it pushes the circle down, but creates empty space. */
    }
.publishbt{
padding:6px 5px 7px; /*padding adjustment */
}

而且你应该取下 <br/>也从按钮内部。它创造了更多难以匹配的空白空间。如果你想要一个大按钮，调整填充来实现它。

我在这里更新了 fiddle :https://jsfiddle.net/Snowbell92/dvnd98x6/4/