這可能與HTML？

我需要實現一個菜單卡進入一個網站。我的顧客想要的是，它看起來就像在餐廳的卡片上。這可能與HTML？

它是否可以在文本中直接放置邊框線，如下圖所示（「Hauptgerichte」）？如果是的話，我怎麼能意識到這一點？

enter image description here

謝謝！

2013-04-11 Luca

如果您希望邊框觸摸文本，你可以調整line-height的東西小：

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

http://jsfiddle.net/kz43g/

來源

2013-04-11 22:55:40 Marty

完美！我花了這麼多時間，它非常簡單...非常感謝：D – Luca

這是1個變體 - 這裏是一個fiddle。
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-11 22:53:15 trajce

把H中標籤的標題，然後使用CSS定位H標記並應用邊界底部。

HTML

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

CSS

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

來源

2013-04-11 22:54:39

把文本div中。然後，將div設置爲一個設定的寬度。然後，添加一個邊框到div。

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

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

來源

2013-04-11 22:54:59

純CSS的解決方案是可能的pseudoelement after，看到fiddle。從文字的距離是由bottom:3px完成：

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

編輯：行高的解決方案看起來更好:)

來源

2013-04-11 22:58:31

這是可能的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%; 
}

在這個例子中，我正在改變行高來移動文本下的文本，然後使用文本縮進將文本移動到正確的位置。它應該給你想要的結果。有幾種方法可以做到這一點，但這需要更少的HTML。

來源

2013-04-11 22:59:56 AJak

謝謝。我必須牢記「文字縮進」標籤。真的有用！ – Luca

這是一個JS Bin，它顯示瞭如何做到這一點。我在段落的底部添加了一個邊框，並在左側添加了一些填充。然後我改變了段落的行高，以便它坐在邊界上。

您可以嘗試一起工作：

text-decoration: underline;

我選擇使用border屬性輕鬆定製。從JS斌

CSS：

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

來源

2013-04-11 23:05:09 AndrewJM

這可能與HTML？

回答

相關問題