边框长度小于div宽度？

Question

我有以下代码

div {
   width: 200px;
   border-bottom: 1px solid magenta;
   height: 50px;   
}

<div></div>

- Ali Nouman

---

你可以设置margin-left和margin-right。这将改变边框，因为边框不会覆盖margin区域。 - CrazyVideoGamer

Answer 1

您可以使用伪元素。例如：

div {
  width   : 200px;
  height  : 50px;   
  position: relative;
  z-index : 1;
  background: #eee;
}

div:before {
  content : "";
  position: absolute;
  left    : 0;
  bottom  : 0;
  height  : 1px;
  width   : 50%;  /* or 100px */
  border-bottom:1px solid magenta;
}

<div>Item 1</div>
<div>Item 2</div>

不需要为了呈现目的而使用额外的标记。:after也受到IE8的支持。

编辑：

如果您需要右对齐的边框，只需将left: 0更改为right: 0

如果您需要居中对齐的边框，只需简单地设置left: 50px;

- Fabrizio Calderan

---

这也是我的技巧，但请注意它会在 div 的左半部分给出边框。如果您想要居中，请将 div:before 设为 left: 50px。 - Chowlett

如果底部边框的宽度为50％，且您希望其居中，则样式需要为left: 25%，因为它将是25％+ 50％+ 25％。 - skift

是的，我知道在这个例子中它是有效的。但对于其他想做类似响应式布局的人，您可能需要使用百分比，就像我需要答案的那种情况一样。 - skift

对于 div 的动态宽度，您可以使用 margin:auto 以及 left:0 和 right:0 伪元素 :after。 - techloris_109

使用 margin: auto，right: 0，left: 0 居中显示该行，在 :before 中添加这些属性。如果这对你有帮助，请点赞。 - Alessandro_Russo

Answer 2

在现代浏览器中，另一种方法是使用负的扩散 box-shadow。请查看此已更新的代码片段：http://jsfiddle.net/WuZat/290/

box-shadow: 0px 24px 3px -24px magenta;

我认为上面被接受的答案是最安全和最兼容的方法。不过，我想分享另一种技术。

- m1.

Answer 3

我像这样在h3标签下面添加了一行。

    <h3 class="home_title">Your title here</h3> 

    .home_title{
        display:block;
    }
    .home_title::after {
        display:block;
        clear:both;
        content : "";
        position: relative;
        left    : 0;
        bottom  : 0;
        max-width:250px;
        height  : 1px;
        width   : 50%;  /* or 100px */
        border-bottom:1px solid #e2000f;
        margin:0 auto;
        padding:4px 0px;
    }

- Ajit Bhandari

Answer 4

您可以使用线性渐变：

div {
    width:100px;
    height:50px;
    display:block;
    background-image: linear-gradient(to right, #000 1px, rgba(255,255,255,0) 1px), linear-gradient(to left, #000 0.1rem, rgba(255,255,255,0) 1px);
 background-position: bottom;
 background-size: 100% 25px;
 background-repeat: no-repeat;
    border-bottom: 1px solid #000;
    border-top: 1px solid red;
}

<div></div>

- lsblsb

---

我最喜欢这个解决方案，我不喜欢在前后使用div /定位，这个解决方案对我来说感觉更自然。 - Kevin Danikowski

Answer 5

标签的边框大小必须与其本身一样大。

解决方法是在下方添加另一个div，居中或绝对定位，具有所需的1像素边框，高度仅为1像素。

http://jsfiddle.net/WuZat/3/

我保留了原始边框以便您查看宽度，并提供两个示例--一个宽度为100，另一个居中宽度为100。删除您不想使用的那个。

- Authman Apatira

Answer 6

我在我的项目中做了类似的事情。我想在这里分享一下。您可以添加另一个 div 作为子元素，并使用常规 CSS 给它一个带小宽度的边框，并将其放置在左侧、中间或右侧。

HTML 代码：

    <div>
        content 
        <div class ="ac-brdr"></div>
    </div>

CSS as below:

   .active {
    color: magneta;
  }
   .active .ac-brdr {
        width: 20px;
        margin: 0 auto;
        border-bottom: 1px solid magneta;
  }

- Faiz Hameed

Answer 7

虽然有点晚了，但如果有人想要制作两条边框（在我的情况下是底部和右侧），您可以使用接受的答案中的技术，并为第二行添加一个 :after 伪元素，然后只需更改属性，如下所示： http://jsfiddle.net/oeaL9fsm/

div
{
  width:500px;
  height:500px;   
  position: relative;
  z-index : 1;
}
div:before {
  content : "";
  position: absolute;
  left    : 25%;
  bottom  : 0;
  height  : 1px;
  width   : 50%;
  border-bottom:1px solid magenta;
}
div:after {
  content : "";
  position: absolute;
  right    : 0;
  bottom  : 25%;
  height  : 50%;
  width   : 1px;
  border-right:1px solid magenta;
}

- JHeth

Answer 8

我有一个案例，需要在div容器中的图片之间加一些底部边框，最好的一行代码是- border-bottom-style: inset;

- Ganni Georgiev

Answer 9

div{
    font-size: 25px;
    line-height: 27px;
    display:inline-block;
    width:200px;
    text-align:center;
}

div::after {
    background: #f1991b none repeat scroll 0 0;
    content: "";
    display: block;
    height: 3px;
    margin-top: 15px;
    width: 100px;
    margin:auto;
}

- Friend

Answer 10

以下内容可以帮助您:

http://www.w3schools.com/tags/att_hr_width.asp

<hr width="50%">

这将创建一个宽度为50%的水平线，如果您想编辑样式，则需要创建/修改类。

- DanielSD

---

这是不太有帮助的。要求是 div 的边框。 - ahmednawazbutt