html - 如何使用 display inline-block 将元素右对齐？

Question

我的页脚有两个 div 标签。我想要一个在页面的左边，一个在右边。我正在使用 display:inline-block 使两个 div 位于同一行，但我无法使它们 float 。

<div id="footer">
    <div id="phone">
        <img id="pIcon" src="img/phone_icon.png" alt="Phone icon" />  
        <p id="pValue"> # </p>
    </div>
    <div id="email">
       <img id="eIcon" src="img/email_icon.png" alt="Email icon" />
       <p id="eValue"> # </p>
    </div>
</div> <!-- end of footer -->


#footer {
    width:100%;
    bottom:0;
    background-color:rgba(102,51,255,1);
}

#email {

    background-color:rgba(255,255,0,1);}

#phone, #email {
    display:inline-block;
    width:45%;
}

#pIcon, #pValue {
    display:inline-block;
}

#eValue, #eIcon {
    display:inline-block;
}

Answer 1

您需要 text-align 属性。对于你想要的左边是 left，右边是 right

#phone, #email {
    display:inline-block;
    width:45%;
    text-align: left;
    vertical-align: middle; //If you need vertical middle alignment
}
#email {
    text-align: right;
}

Demo