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 がCSS に<li class=vendors">VENDORS</li>追加padding:0 10px;されている場合、左右の境界線が 10px 外側に押し出されます。

于 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% を占めます。幅とスタイルを自由に制限できます。

最も役立つ Web サイトへのリンクを次に示します。

于 2013-03-12T21:10:44.830 に答える