为什么我不能对齐两个按钮
Why I can't align two buttons
我有问题,我无法在一行中对齐两个按钮。
我尝试设置 span class 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;
}
在两个按钮上使用 vertical-align: middle;
。
.pptext {
background: none repeat scroll 0 0 #c9e0e6;
border: medium none;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
vertical-align: middle;
}
.ppenvelope {
background: none repeat scroll 0 0 #b2d4dd;
border: medium none;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
vertical-align: middle;
}
我会在两个按钮上设置 float: left;
,在 .ppdiv
上设置 overflow: hidden;
。为了确保两个按钮保持相同的高度,还要在它们上设置 height
(例如 height: 48px;
)。您也可以完全删除 span.pptext2
元素,除非您出于其他目的需要它。看看 fiddle: 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;
}
https://jsfiddle.net/71782p4L/2/
给你。
.ppdiv {
height:43px;
overflow:hidden;
}
.ppdiv img {
padding:10px;
}
.ppenvelope {
border:none;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background: #b2d4dd;
float:left;
height:100%; /*Sets height to 100% of current container, of which is ppdiv (43px) */
}
.pptext {
border:none;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: #c9e0e6;
height:100%; /*Sets height to 100% of current container, of which is ppdiv (43px)*/
}
我有问题,我无法在一行中对齐两个按钮。
我尝试设置 span class 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;
}
在两个按钮上使用 vertical-align: middle;
。
.pptext {
background: none repeat scroll 0 0 #c9e0e6;
border: medium none;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
vertical-align: middle;
}
.ppenvelope {
background: none repeat scroll 0 0 #b2d4dd;
border: medium none;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
vertical-align: middle;
}
我会在两个按钮上设置 float: left;
,在 .ppdiv
上设置 overflow: hidden;
。为了确保两个按钮保持相同的高度,还要在它们上设置 height
(例如 height: 48px;
)。您也可以完全删除 span.pptext2
元素,除非您出于其他目的需要它。看看 fiddle: 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;
}
https://jsfiddle.net/71782p4L/2/
给你。
.ppdiv {
height:43px;
overflow:hidden;
}
.ppdiv img {
padding:10px;
}
.ppenvelope {
border:none;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background: #b2d4dd;
float:left;
height:100%; /*Sets height to 100% of current container, of which is ppdiv (43px) */
}
.pptext {
border:none;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: #c9e0e6;
height:100%; /*Sets height to 100% of current container, of which is ppdiv (43px)*/
}