Html CSS：将边框设置为半宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8808099/
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
CSS: Set border to half width
提问by user1117313
Consider following:
考虑以下事项：
<div class="box">
...
</div>
.box{
width:500px;
border-bottom: 1px solid #ccc;
}
It will set the bottom border of full width of the box (500px). But instead of setting the border bottom to whole width, I'd like to set 300px, in the middle of the box bottom, how should I do that..
它将设置框的全宽（500px）的底部边框。但不是将边框底部设置为整个宽度，我想在框底部的中间设置 300px，我该怎么做..
采纳答案by Chase Florell
Can you throw an <hr>at the bottom of your box?
你能<hr>在你的盒子底部扔一个吗？
<div class="box">
...
<hr>
</div>
.box{
width:500px;
}
.box hr{
width: 300px;
border-bottom: 1px solid #ccc;
}
回答by Melniciuc Costea
You can Use ::after or ::before pseudo-selectors. Like:
您可以使用 ::after 或 ::before 伪选择器。喜欢：
<div> something here </div>
CSS:
CSS：
div {
width: 500px;
height: 100px;
position: relative;
padding-top: 20px;
margin-top: 50px;
}
div::before {
content: '';
display: block;
position: absolute;
top: 0;
width: 50%;
left: 25%;
border-top: 1px solid red;
}
Here is the jsfiddle
这是jsfiddle
回答by wanovak
You could do this:
你可以这样做：
.box {
position: relative;
width: 500px;
}
.border {
position: aboslute;
background: #ccc;
left: 100px;
bottom: 0;
width: 300px;
height: 1px;
} <div class="box">
<div class="border">
</div>
</div>But there are infinite possibilities. Some are more semantically correct than others; this solution is simply a quick fix.
但是有无限可能。有些在语义上比其他的更正确；此解决方案只是一个快速解决方案。
回答by Kris Hollenbeck
You could use a background-image:
您可以使用背景图像：
.box{
width:500px;
border-bottom: 1px solid #ccc;
background-image:(yourimage.png); /*make your image a solid line 1px tall by 250px wide (or so)*/
background-position: bottom left;
background-repeat:no-repeat;
}
回答by redDevil
I would suggest doing something like this, works well in Firefox
我建议做这样的事情，在 Firefox 中运行良好
<style type="text/css">
.box{
width: 500px;
height: 20px;
}
.boxHalfWidth{
width: 250px;
height: 1px;
border-bottom: 1px solid #CCC;
}
</style>
</head>
<body>
<div class="box">
some data
<div class="boxHalfWidth"></div>
</div>
</body>
回答by Shirley Ashby
.box {
padding-bottom: 10px;
background-image: linear-gradient(#ccc,#ccc);
background-size: 50% 2px;
background-position: bottom left;
background-repeat: no-repeat;
}
