边框长度小于 div 宽度？答案

【问题标题】：Border length smaller than div width?边框长度小于 div 宽度？
【发布时间】：2012-01-24 06:27:43
【问题描述】：

我有以下代码

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

DEMO

div的宽度是200px所以border-bottom也是200px但是如果我想要border-bottom只有100px而不改变div的宽度怎么办？

【问题讨论】：

标签： html css

【解决方案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;

【讨论】：

这也是我的技术，但请注意它会在 div 的左半边给出边框。如果你想让它居中，给div:beforeleft: 50px。
问题没有指定边框应该出现在哪个位置，所以我没有考虑其他位置
如果底部边框的宽度为 50% 并且您希望它居中，则样式需要为 left: 25%，因为它将是 25% + 50% + 25%
是的，我知道在这个例子中它可以工作。但是对于其他人做类似的事情可能试图使其响应，你可能需要使用 % ，因为我需要答案。
在:before 上使用margin: auto、right: 0、left: 0 使线条居中。如果这对您有帮助，请点赞。

【解决方案2】：

另一种方法（在现代浏览器中）是使用负扩散框阴影。看看这个更新的小提琴：http://jsfiddle.net/WuZat/290/

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

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案5】：

你不能有与 div 本身不同大小的边框。

解决方案是在neath 下添加另一个div，居中或绝对定位，具有所需的1pixel 边框和只有1pixel 的高度。

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

我留下了原始边框，以便您可以看到宽度，并有两个示例 - 一个宽度为 100，另一个以 100 宽度居中。删除你不想使用的那个。

【讨论】：

【解决方案6】：

晚会，但对于任何想要制作 2 个边框（在我的情况下位于底部和右侧）的人，您可以在接受的答案中使用该技术并在第二行添加一个 :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;
}

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

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

HTML 代码：

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

CSS如下：

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

【讨论】：

【解决方案10】：

边框被赋予整个 html 元素。如果你想要半底边框，你可以用一些其他可识别的块来包裹它，比如 span。

HTML 代码：

<div> <span>content here </span></div>

CSS如下：

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

【讨论】：

【解决方案11】：

这会有所帮助：

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

<hr width="50%">

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

【讨论】：

这没有帮助。要求是 div 的边框

【解决方案12】：

我刚刚使用:after 和::after 完成了与此相反的操作，因为我需要使我的底部边框正好1.3rem 更宽：

当我同时使用:before 和:after 时，我的元素变得超级变形，因为这些元素与display: flex、flex-direction: row 和align-items: center 水平对齐。

您可以使用它来制作更宽或更窄的东西，或者可能是任何数学维度模型：

a.nav_link-active {
  color: $e1-red;
  margin-top: 3.7rem;
}
a.nav_link-active:visited {
  color: $e1-red;
}
a.nav_link-active:after {
  content: '';
  margin-top: 3.3rem;      // margin and height should
  height: 0.4rem;          // add up to active link margin
  background: $e1-red;
  margin-left: -$nav-spacer-margin;
  display: block;
}
a.nav_link-active::after {
  content: '';
  margin-top: 3.3rem;      // margin and height should
  height: 0.4rem;          // add up to active link margin
  background: $e1-red;
  margin-right: -$nav-spacer-margin;
  display: block;
}

抱歉，这里是SCSS，只需将数字乘以 10 并将变量更改为一些正常值即可。

【讨论】：

【解决方案13】：

右边框长度小于父 div 带有伪元素

@import url(https://fonts.googleapis.com/css?family=Raleway);

body{
 font-family: 'Raleway', sans-serif;
}

 
div {
  width   : 200px;
  height  : 50px;   
  position: relative;
  z-index : 1;
  background-color: #f5f5f5;
  margin: 20px auto;
  padding: 20px;
  color:#726E97;
}

div:before {
  content : "";
  position: absolute;
  right    : 0;
  top     : 25%;
  height  : 50px;
  width   : 50%;
  border-right:5px solid #726E97;
}

&lt;div&gt;BOX 1&lt;/div&gt;

【讨论】：