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

这是 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 回答
1

纯 CSS 解决方案可以使用伪元素after，请参阅小提琴。与文本的距离由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

这是一个展示如何做到这一点的JS Bin 。我在段落底部添加了一个边框，并在左侧添加了一点填充。然后我更改了段落的行高，使其正好位于边框上。

您可以尝试使用：

text-decoration: underline;

我选择使用边框属性来轻松定制。

来自 JS Bin 的 CSS：

p {
  border-bottom:1px solid #333;
  line-height: 50%;
  padding: 0 0 0 40px;
}
于 2013-04-11T23:05:09.737 回答
0

将标题放在 H 标签中，然后使用 CSS 定位 H 标签并应用边框底部。

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 回答