html - 底部边框可以水平移动吗？

Question

如果我在 div 元素上有一个底部边框。有没有办法，可以在不移动整个 div 的情况下滑动边界？

例如: http://jsfiddle.net/jLCSX/

<div class="contactusside">
     <h2>Contact Details</h2>

    <p><b>Phone:</b> 
        <br>1111111111</p>
    <p><b>Fax:</b> 
        <br>111111111</p>
    <p><b>Email:</b> sales@123.com</p>
    <p><b>Address:</b> 
        <br>123laneway ave
        <br>(PO Box xxx)
        <br>balh ablah
        <br>country</p>
    <br>
    <br>
    <p></p>
    <br>
</div>

.contactusside {
    width: 210px;
    float: right;
    margin-left: 0px;
    margin-right: 10px;
    padding-right: 0px;
    padding-left: 15px;
    border-left: 1px solid #eee;
    border-bottom: 1px solid #777;
}
.contactusside h2 {
    border-bottom: 1px solid #777;
    padding-bottom: 4px;
}

我能否将底部边框向右移动，使其与顶部边框对齐？

Answer 1

请检查 fiddle :

fiddel

Put: <div class="bottom-border"></div>

和CSS:

.bottom-border { border-bottom: 1px solid #777; }

同时删除您设置的底部边框。

.contactusside {
width: 210px;
float: right;
margin-left: 0px;
margin-right: 10px;
padding-right: 0px;
padding-left: 15px;
border-left: 1px solid #eee;
}