Html 边框长度小于 div 宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8572952/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Border length smaller than div width?
提问by Ali Nouman
I have following code
我有以下代码
div {
width:200px;
border-bottom:1px solid magenta;
height:50px;
}
The div width is 200px so border-bottom is also 200px but what should I do if I want border-bottom only 100px without changing div width?
div 宽度是 200px 所以 border-bottom 也是 200px 但是如果我想要 border-bottom 只有 100px 而不改变 div 宽度我该怎么办？
回答by Fabrizio Calderan
You can use pseudoelements. E.g.
您可以使用伪元素。例如
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>No need to use extra markup for presentational purpose. :after is also supported from IE8.
无需为演示目的使用额外的标记。:after 也支持 IE8。
edit:
编辑：
if you need a right-aligned border, just change left: 0with right: 0
如果您需要右对齐边框，只需更改left: 0为right: 0
if you need a center-aligned border just simply set left: 50px;
如果您需要居中对齐的边框，只需简单设置 left: 50px;
回答by m1.
Another way to do this (in modern browsers) is with a negative spread box-shadow. Check out this updated fiddle: http://jsfiddle.net/WuZat/290/
另一种方法（在现代浏览器中）是使用负扩展框阴影。看看这个更新的小提琴：http: //jsfiddle.net/WuZat/290/
box-shadow: 0px 24px 3px -24px magenta;
I think the safest and most compatible way is the accepted answer above, though. Just thought I'd share another technique.
不过，我认为最安全和最兼容的方法是上面接受的答案。只是想我会分享另一种技术。
回答by lsblsb
You can use a linear gradient:
您可以使用线性渐变：
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>回答by Ajit Bhandari
I added line under under h3 tag like this
我在 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;
}
回答by JHeth
Late to the party but for anyone who wants to make 2 borders (on the bottom and right in my case) you can use the technique in the accepted answer and add an :after psuedo-element for the second line then just change the properties like so: http://jsfiddle.net/oeaL9fsm/
晚会晚了，但对于任何想要制作 2 个边框的人（在我的情况下在底部和右侧），您可以在已接受的答案中使用该技术并在第二行添加 :after psuedo-element 然后只需更改属性，例如所以：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;
}
回答by Authman Apatira
You cannot have a different sized border than the div itself.
您不能有与 div 本身不同大小的边框。
the solution would be to just add another div under neath, centered or absolute positioned, with the desired 1pixel border and only 1pixel in height.
解决方案是在neath，居中或绝对定位下添加另一个div，具有所需的1像素边框和仅1像素的高度。
I left the original border in so you can see the width, and have two examples -- one with 100 width, and the other with 100 width centered. Delete the one you dont wish to use.
我保留了原始边框，以便您可以看到宽度，并有两个示例 - 一个宽度为 100，另一个宽度为 100 居中。删除您不想使用的那个。
回答by Umesh Patil
The border is given the whole html element. If you want half bottom border, you can wrap it with some other identifiable block like span.
边框被赋予整个 html 元素。如果你想要半底边框，你可以用一些其他可识别的块来包裹它，比如跨度。
HTML code:
HTML代码：
<div> <span>content here </span></div>
CSS as below:
CSS如下：
div{
width:200px;
height:50px;
}
span{
width:100px;
border-bottom:1px solid magenta;
}
回答by agm1984
I just accomplished the opposite of this using :afterand ::afterbecause I needed to make my bottom border exactly 1.3remwider:
我刚刚完成了与此相反的操作:after，::after因为我需要使底部边框1.3rem更宽：
My element got super deformed when I used :beforeand :afterat the same time because the elements are horizontally aligned with display: flex, flex-direction: rowand align-items: center.
当我用我的元素得到了超级变形:before，并:after在同一时间，因为元素与水平对齐display: flex，flex-direction: row和align-items: center。
You could use this for making something wider or narrower, or probably any mathematical dimension mods:
您可以使用它来制作更宽或更窄的东西，或者可能是任何数学维度模型：
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;
}
Sorry, this is SCSS, just multiply the numbers by 10 and change the variables with some normal values.
对不起，这是SCSS，只需将数字乘以 10 并使用一些正常值更改变量。
回答by Ganni Georgiev
I have case to have some bottom border between pictures in div container and the best one line code was - border-bottom-style: inset;
我有案例在 div 容器中的图片之间有一些底部边框，最好的一行代码是 - border-bottom-style: inset;
回答by Faiz Hameed
I did something like this in my project. I would like to share it here. You can add another div as a child and give it a border with small width and place it left, centre or right with usual CSS
我在我的项目中做了这样的事情。我想在这里分享。您可以添加另一个 div 作为孩子，并为其设置一个小宽度的边框，然后使用通常的 CSS 将其放置在左侧、中间或右侧
HTML code:
HTML代码：
<div>
content
<div class ="ac-brdr"></div>
</div>
CSS as below:
CSS如下：
.active {
color: magneta;
}
.active .ac-brdr {
width: 20px;
margin: 0 auto;
border-bottom: 1px solid magneta;
}
