Updated Fiddle

Question

我有一组容器，其底部边框的样式如下：

<div class="row col-md-4">
    <div class="my-styled-div">
    </div>
</div>
<div class="row col-md-4">
    <div class="my-styled-div">
    </div>
</div>
<div class="row col-md-4">
    <div class="my-styled-div">
    </div>
</div>

使用css样式（除了bootstrap），如下所示：

.my-styled-div {
    text-align: center;
    padding-bottom: 10px;
    border-right: 1px solid #848484;
    border-bottom: 1px solid #848484;
}

我不知道该怎么做是为了防止底部边框延伸到div的边缘。我可以使用什么来开始底部边框，例如，从每个div的左侧开始25px？

这是一个带有一点视觉效果的小提琴链接： https://jsfiddle.net/jfakey/mhwb49bu/1/

Answer 1

对于CSS伪元素来说，这听起来很棒。而不是将底部边框放在div上，而是将其放在伪元素中。我使用了背景颜色和1px的高度，这实际上与您的目的相同。然后将margin设置为margin，将left + right设置为零以进行居中。然后，您可以设置所需的宽度。

.my-styled-div {
        text-align: center;
        padding-bottom: 10px;
        border-right: 1px solid #848484;

    }
    .my-styled-div:after {
        content: '';
        position: absolute;
        margin: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 50%;
        height: 1px;
        background-color: #000;
    }

这是一个更新的小提琴https://jsfiddle.net/mhwb49bu/11/

您可以使用伪元素的定位来使其从左侧或右侧开始，而不是使边框居中。

Answer 2

执行此操作的一种方法是伪造带有附加div的边框（或者您可以使用伪选择器，如下面的@danieljkahn详细信息，如果您不想更改HTML）。然后，您可以使用calc将div的宽度设置为100％ - 25px，然后将其右移：

.border {
    width:calc(100% - 25px);
    height:1px;
    background:#848484;
    float:right;
}

Updated Fiddle

Answer 3

我认为你不能为div的一部分设置样式，但你当然可以使用

tage来完成工作

＆＃13;

 body {
    margin: 100px;
}
    .my-styled-div {
        text-align: center;
        /*padding-bottom: 10px;  remove this*/
        border-right: 1px solid #848484;
        /*border-bottom: 1px solid #848484;  also remove this */
    }

.hr-fix{
    margin-bottom: 0;
    margin-top: 10px;
    margin-left: 25px;/*  << you can specify how far from the left you want the line to be */
    border: 0;
    border-bottom: 1px solid #848484; /* you may match this border with the right border of the <div>*/
    
}

＆＃13;

<div class="row col-md-4">
        <div class="my-styled-div">
            div1
            <hr class="hr-fix" />
        </div>
    </div>
    <div class="row col-md-4">
        <div class="my-styled-div">
            div2
             <hr class="hr-fix" />
        </div>
    </div>
    <div class="row col-md-4">
        <div class="my-styled-div">
            div3
            <hr class="hr-fix" />
        </div>
    </div>

＆＃13;

Answer 4

我认为包装或样式化另一个嵌套div是执行此操作的唯一方法（除非您使用背景图像或样式化HR）。这是因为CSS的设计方式 - 也就是Box模型：https://css-tricks.com/the-css-box-model/

https://jsfiddle.net/mhwb49bu/12/

.my-styled-div {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #848484;
    margin-left: 25px;
    padding-left: 25px;
}
.row { 
    border-right: 1px solid silver;
    border-left: 1px solid silver;
}

Css创建一个不扩展整个div长度的底部边框

4 个答案:

Updated Fiddle