Question

如何扩展边框长度超过文本长度？这就是我到目前为止所做的：

    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>

Answer 1

CSS边框位于HTML元素的边距和填充之间。如果希望HTML元素的边框延伸超过该元素的宽度（或高度），则可以向元素添加CSS填充以向外推动边框。

例如，如果您的html为<li class=vendors">VENDORS</li>，则向您的CSS添加padding:0 10px;会将边框向右和向左推出10px。

Answer 2

使用填充和负边距。

E.g：

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

上面给出了所有边的填充，左边和右边的负1em边距。你可能希望摆弄它。

Answer 3

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

<div class="outer">
    <p class="inner">Your text</p>
</div>

您可能需要设置外部宽度。因为它可能无法在每个浏览器中自动缩放。或者只是使外部120％和内部固定宽度。应该可以采用多种方法。

Answer 4

你必须指定＆＃34;＆＃34; 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>
</html>

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

此处a link访问能够为您提供最大帮助的网站。

希望我很乐于助人

延长边界css的长度

4 个答案: