1

ウェブサイトにメニューカードを実装する必要があります。私の顧客は、レストランのカードとまったく同じように見えることを望んでいます。

HTML を使用して、下の画像 ("Hauptgerichte") のようにテキストのすぐ下に境界線を入れることはできますか? はいの場合、どうすればそれを理解できますか？

ここに画像の説明を入力

ありがとう！

4

7 に答える 7

2

境界線をテキストに接触させたい場合は、line-heightを小さく調整できます。

p
{
    border-bottom: 1px solid black;
    line-height: 10px;
}

http://jsfiddle.net/kz43g/

于 2013-04-11T22:55:40.597 に答える
1

純粋な CSS ソリューションは pseudoelement で可能です。 fiddleafterを参照してください。テキストからの距離は、 によって決定されます。bottom:3px

.underline {
    position:relative;
}
.underline::after {
    content: '';
    width: 100%;
    position:absolute;
    bottom: 3px;
    left:0;
    border-bottom: 1px solid black;    
}

編集：行の高さのソリューションは見栄えが良くなります:)

于 2013-04-11T22:58:31.193 に答える
1

これは HTML / CSS で可能です:例

HTML:

<h3 class="yourClass">Text place</h3>

CSS :

.yourClass{
   width:300px;
   border-bottom: 1px solid #000;
   text-indent:50px;
   line-height:80%;
}

この例では、行の高さを変更してテキストを行の下に移動し、text-indent を使用して正しい位置に移動しています。望ましい結果が得られるはずです。これを行うにはいくつかの方法がありますが、必要な HTML は少なくなります。

于 2013-04-11T22:59:56.363 に答える
1

ここに 1 つのバリアントがあります - ここにフィドルがあります。
html:

 <div>
        <p> some text </p>
    </div>

CSS:

*{
padding:0;
    margin:0;
}
div{
    border-bottom:1px solid #000;
}
p{
    margin-bottom:-5px;
}

テキスト コンテナー (この場合は p タグ) に負の下部マージンを設定するだけです。

于 2013-04-11T22:53:15.057 に答える
0

ヘッダーを H タグに配置し、その H タグを CSS でターゲットにして、border bottom を適用します。

HTML

<div id="content">
<h1>title</h1>
</div>

CSS

#content h1{
Border-bottom:1px solid #999;
Width: 150px;
}
于 2013-04-11T22:54:39.607 に答える
0

テキストを div 内に配置します。次に、div を一定の幅にします。次に、div に境界線を追加します。

<div id="title">
 <h2> Hauptgerichte </h2>
</div>

/*CSS*/
#title{
  width: 50px;
  border-bottom: 2px solid #000000;
}
于 2013-04-11T22:54:59.297 に答える