logo标签列表

扩展CSS边框长度

csshtmlborder
24

我该如何将边框的长度扩展到超出文本长度？这是我目前所拥有的：

    color: #8C4600;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    border-bottom: 1px solid #D1D1D1;

这是HTML代码：<li class = "vendors">供应商</li>

3
请发布使用这个CSS样式的HTML代码。 - brbcoding
3
你能解释一下你所说的“超出了我的文本长度”是什么意思吗？ - zxqx
我的意思是，我有一行文本，然后我有一个底部边框，类似于下划线，边框的线只延伸到我的文本长度，我希望边框的长度比我的文本长度更长。 - user12074577
5个回答
25

使用padding和负margin。

例如：

div {
  padding: 1em;
  margin: 0 -1em;
  border-bottom: 1px solid red;
}

上述代码在所有边缘都添加了填充，并在左右两侧添加了负1em的外边距。您可能希望对此进行微调。

17

CSS边框位于HTML元素的外边距和内边距之间。如果你想让HTML元素的边框超出该元素的宽度（或高度），可以通过在元素中添加CSS填充来将边框向外推。

例如，如果您的HTML是<li class=vendors">VENDORS</li>，那么将padding:0 10px;添加到您的CSS中将会使右侧和左侧的边框向外扩展10像素。

0

   .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;
    }
<div class="outer">
  <p class="inner">Your text</p>
</div>

你可能需要设置外部宽度，因为在每个浏览器中它可能无法正确自动缩放。或者只需将外部设置为120％，内部设置为固定宽度。这应该可以通过多种方法实现。

0

只需将边框扩展到vw而不是其父元素。

这就是我的意思：

.vendors {
  width: 100vw;
  border-bottom: 1px solid hsla(0, 0%, 0%, 1);
}
<li class="vendors">VENDORS</li>

-2

你需要在 CSS 中指定 "border: ##px color;，这样可以为相关的 HTML 标签创建一个边框。

以下是示例代码：

<!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>

默认情况下，如果没有设置宽度和边框样式，边框将占据100%的空间。您可以按照任何方式限制其宽度和样式。

这里有一个网站链接，可以帮助您最多。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接