22

如何将边框的长度扩展到文本长度之外？这是我到目前为止所拥有的：

    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">VENDORS</li>

4

4 回答 4

19

使用填充和负边距。

例如：

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

上面给出了所有边的填充，以及左右两边的负 1em 边距。你可能想摆弄那个。

于 2013-03-12T21:10:50.557 回答
16

CSS 边框位于 HTML 元素的边距和内边距之间。如果您希望 HTML 元素的边框超出该元素的宽度（或高度），您可以向元素添加 CSS 填充，以便将边框向外推。

例如，如果您的 html 正在<li class=vendors">VENDORS</li>添加padding:0 10px;到您的 CSS 中，则会将边框左右向外推 10 像素。

于 2013-03-12T21:10:58.240 回答
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%，内部固定宽度。这应该可以通过多种方法实现。

于 2013-03-12T20:54:48.233 回答
-2

您必须"border: ##px color; 在 css 中指定。

这将在相关的 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% 的空间。您可以以任何您想要的方式限制其宽度和样式。

这是一个对您最有帮助的网站的链接。

于 2013-03-12T21:10:44.830 回答