Question

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

<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

底部边框是div的一部分。

如果您的意思是希望底部边框与h2的底部边框对齐，我建议将div的内容放在其自己的div内{1}}，并给它一个顶部和底部边框。

Answer 2

请检查小提琴：

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;
}

Answer 3

您无法将边框设置为仅部分路径，但您可以使用另一个div或<hr>元素来模拟该效果。例如：

<div>
//content

    <div style="width:50%;position:absolute;right:0;border-bottom:1px solid black"></div>
</div>

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

3 个答案: