这可能与HTML有关吗？

Question

我需要在网站上实现一个菜单卡。我的客户想要的是，它看起来与餐厅的卡片完全一样。

是否可以使用HTML将边框线直接放在文本下面，如下图所示（“Hauptgerichte”）？如果是的话，我怎么能意识到这一点？

谢谢！

Answer 1

如果您希望边框触及文字，可以将line-height调整为小尺寸：

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

http://jsfiddle.net/kz43g/

Answer 2

这是一个变体 - 这是一个fiddle HTML：

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

的CSS：

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

我只是将负底边距放到文本容器中（在这种情况下是p标记）

Answer 3

使用伪元素after可以实现纯CSS解决方案，请参阅fiddle。与文本的距离由bottom:3px：

完成

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

编辑：行高解决方案看起来更好：）

Answer 4

这可以在HTML / CSS中使用：Example

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。

Answer 5

这是JS Bin，显示了如何做到这一点。我在段落的底部添加了一个边框，在左边添加了一个小填充。然后我改变了段落的行高，使它恰好位于边界上。

您可以尝试使用：

text-decoration: underline;

我选择使用border属性进行轻松自定义。

来自JS Bin的

CSS：

p {
  border-bottom:1px solid #333;
  line-height: 50%;
  padding: 0 0 0 40px;
}

Answer 6

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

HTML

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

CSS

#content h1{
Border-bottom:1px solid #999;
Width: 150px;
}

Answer 7

将文本放在div中。然后，使div成为设定宽度。然后，为div添加边框。

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

/*CSS*/
#title{
  width: 50px;
  border-bottom: 2px solid #000000;
}