Html 扩展边框css的长度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15371856/
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
Extend length of border css
提问by user12074577
How do I expand the length of a border past the length of my text? This is what I have so far:
如何将边框的长度扩展到超过我的文本长度？这是我到目前为止：
color: #8C4600;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 15px;
border-bottom: 1px solid #D1D1D1;
This is the HTML: <li class = "vendors">VENDORS</li>
这是 HTML： <li class = "vendors">VENDORS</li>
采纳答案by ASGM
CSS borders are placed between the margins and padding of an HTML element. If you want the borders of an HTML element to extend past the width (or height) of that element, you can add CSS padding to the element in order to push the borders outward.
CSS 边框放置在 HTML 元素的边距和内边距之间。如果您希望 HTML 元素的边框超出该元素的宽度（或高度），您可以向该元素添加 CSS 填充以将边框向外推。
For example, if your html is <li class=vendors">VENDORS</li>adding padding:0 10px;to your CSS would push the borders outwards on the right and left by 10px.
例如，如果您的 html 正在<li class=vendors">VENDORS</li>添加padding:0 10px;到您的 CSS 中，则会将左右边框向外推 10 像素。
回答by Jeremy Carlson
Use padding and negative margins.
使用填充和负边距。
E.g.:
例如：
div {
padding: 1em;
margin: 0 -1em;
border-bottom: 1px solid red;
}
The above gives padding on all sides, and negative 1em margin on left and right. You may wish to fiddle w/ that.
上面给出了所有边的填充，以及左边和右边的负 1em 边距。你可能想摆弄那个。
回答by Jeremy Carlson
CSS
CSS
.inner {
width: 80%;
}
.outer {
border-bottom: 1px solid #D1D1D1;
color: #8C4600;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 15px;
}
HTML
HTML
<div class="outer">
<p class="inner">Your text</p>
</div>
You will probably need to set the outer width though. As it might not auto-scale correctly in each browser. Or just make outer 120%, and inner a fixed width. This should be possible in multiple approaches.
不过，您可能需要设置外部宽度。因为它可能无法在每个浏览器中正确自动缩放。或者只是使外部 120% 和内部固定宽度。这应该可以在多种方法中实现。
回答by Ali
You have to specify "border: ##px color;in css.
你必须"border: ##px color;在css中指定。
This will create a border around the related html tag.
这将在相关的 html 标签周围创建一个边框。
A sample code is:
示例代码是：
<!DOCTYPE html>
<html>
<head>
<style>
p {
width:225px;
border-style:solid;
border:2px solid red;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
By default, without the width and border-style, the border will occupy 100% of the space. You can restrict its width and style in any way you want.
默认情况下，没有宽度和边框样式，边框将占据 100% 的空间。您可以以任何您想要的方式限制其宽度和样式。
Here's a linkTo a website that will help you the most.
这是一个链接，指向一个对您最有帮助的网站。
