3

下線の太さを制御しようとしていますが、テキストに準拠していない巨大な水平線が 1 つだけのようです。テキストと同じ太さでテキストに下線を引くにはどうすればよいですか:

<!DOCTYPE>
<html>
<head>
<style type="text/css">
.title {

border-bottom: 2px solid red;

}
</style>
</head>
<body>
<div class="title">test</div>
</body>
</html>
4

7 に答える 7

3

「div」タグに「border-bottom」スタイルが追加されています。デフォルトでは 'divs' が 'display: block;' に設定されているためです。div の幅は 100% です。これを解決するには、テキストを囲む別のタグを追加し、そのタグにクラスを指定します。

例えば：<div><span class="title">test</span></div>

新しいコード:

<!DOCTYPE>
<html>
<head>
<style type="text/css">
.title {

border-bottom: 2px solid red;

}
</style>
</head>
<body>
<div><span class="title">test</span></div>
</body>
</html>
于 2012-11-28T19:29:44.933 に答える
3

display:inline-block;CSSまたはfloat要素に挿入するだけです。

于 2012-11-28T19:35:57.533 に答える
1

問題はborder、下線ではなく を使用していることです。境界線は要素の長さ全体に拡張されます。これは a のdivデフォルトwidth: 100%です。

divこれを変更するには、明示的にの幅を制限するfloatか、その を使用または変更する必要がありdisplayます。

使用width:

div {
    width: 10em; /* or whatever... */
}

JS フィドルのデモ。

使用float:

div {
    float: left; /* or 'right' */
}

JS フィドルのデモ。

使用display:

div {
    display: inline-block; /* or 'inline' */
}

JS フィドルのデモ。

もちろん、下線をテキストの下に効果的に配置し、おそらくテキストに「下線」を付けるのに役立つことを考えると (テキストが定義された幅よりも長い場合、定義された幅を使用して、デモの問題を参照してください)、デフォルトの動作は希望する動作と同じであるため、spana ではなく for thisなどのインライン要素を単純に使用する方が簡単です。div

于 2012-11-28T19:28:36.173 に答える
0

IE7 には、これを機能させる唯一の方法があるようです。

<!DOCTYPE html>
<html>

<head>

<style type="text/css">
h1 {
border-bottom: 3px solid red;
display: inline;
}
</style>

</head>

<body>
<div><h1>Hello, world</h1></div>

</body>

</html>
于 2012-11-28T19:59:24.453 に答える
0

を に変更divしますspan。

span1 行の短いテキストに適しています。

ここを参照してください：

例

于 2012-11-28T19:28:13.620 に答える
0

emの代わりに使用するとpx、境界線はフォント サイズを採用します。

span {
    font-size:5em;
    border: solid black;
    border-width:0 0 0.1em;
}​

ここにフィドルがあります: Fiddle。

于 2012-11-28T19:32:27.190 に答える