为什么我不能对齐两个按钮

RS92 发表于 Dev

RS92

我有问题，我无法将两个按钮对齐在一行中。

我试图设置跨度类pptext2的填充，但没有成功。这是代码http://jsfiddle.net/71782p4L/1/

的HTML

<div class="ppdiv">
<button class="ppenvelope"><img src="http://i.imgur.com/RfLMyak.jpg" alt="Slika"></button><button class="pptext"><span class="pptext2">PRIVATE MESSAGE</span></button>
</div><!--Zatvoren ppdiv-->

的CSS

.ppdiv{
    padding-top:22px;
    padding-left: 19px;

}
.ppdiv img{
    padding:10px;
    font-size: 20px;
}
.ppenvelope{
    border:none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
   background: #b2d4dd;
}
.pptext{
    border:none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
       background: #c9e0e6;
}
.pptext2{
    display: inline-block;
     color:#4c6974;
       padding-top: 15px;
       padding-bottom:13px;
       padding-left: 13px;
}

igi33

我将设置float: left;两个按钮overflow: hidden;上.ppdiv。为了确保两个按钮保持相同的高度，请同时对其进行设置height（例如height: 48px;）。您也可以span.pptext2完全删除该元素，除非您出于其他目的需要它。看一下小提琴：https : //jsfiddle.net/igi33/ck4w6cLq/1/。

HTML：

<div class="ppdiv">
    <button class="ppenvelope">
        <img src="http://i.imgur.com/RfLMyak.jpg" alt="Slika">
    </button>
    <button class="pptext">PRIVATE MESSAGE</button>
</div>

CSS：

.ppdiv{
    overflow: hidden;
}
.ppenvelope, .pptext {
    float: left;
    border: none;
    height: 48px;
}
.ppenvelope{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    background: #b2d4dd;
}
.ppdiv img{
    padding:10px;
}
.pptext{
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background: #c9e0e6;
    color:#4c6974;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。