我有一个分组文本,用户希望每行的第一个字母垂直拼写一个单词。
- [R ESPONSIVE
电子 FFICIENT
G REATER GOOD
I NNOVATION
0 笔
名词 EIGHBORLY
请参阅thie fiddle,了解我想要做的更好的事情。我们认为如果内容的其余部分彼此对齐,但是避免使用表格来显示信息,它会更好。更像是:
R ESPONSIVE
E FFICIENT
G REATER GOOD
I NNOVATION
O PEN
N EIGHBORLY
我尝试了一个保证金,但这没有帮助。我想对齐“ESPONSIVE”,“FFICIENT”,“REATER GOOD”,“NNOVATION”,“PEN”和“EIGHBORLY”。
我的CSS-fu很弱,有人可以指出我正确的方向吗?
答案 0 :(得分:1)
请添加css
h1:first-letter{
display: inline-block;
padding-right: 10px;
}
<h1>R<span style="font-size:x-small;">ESPONSIVE - Prompt to respond and serve</span></h1>
<h1>E<span style="font-size:x-small;">FFICIENT - Highest performance at greatest economy</span></h1>
<h1>G<span style="font-size:x-small;">REATER GOOD - Serve for the good of the community and region</span></h1>
<h1>I<span style="font-size:x-small;">NNOVATION - Embracing new ideas and methods to improve service delivery</span></h1>
<h1>O<span style="font-size:x-small;">PEN - Spirit of accessibility in policy making and operation</span></h1>
<h1>N<span style="font-size:x-small;">EIGHBORLY - Concern and compassion for others</span></h1>
答案 1 :(得分:1)
在这种情况下,填充比边距更好。保证金仅适用于块或内联块。 Span是一个内联元素。
您修改过的示例如下所示:
<h1>R<span style="font-size:x-small; padding-left: 10px;">ESPONSIVE - Prompt to respond and serve</span></h1>
您可能希望将一个类应用于所有跨度:http://jsfiddle.net/MikeWills/8omta6ks/。
.smaller {
font-size:x-small;
padding-left: 10px;
}
<h1>R<span class="smaller">ESPONSIVE - Prompt to respond and serve</span></h1>
<h1>E<span class="smaller">FFICIENT - Highest performance at greatest economy</span></h1>
<h1>G<span class="smaller">REATER GOOD - Serve for the good of the community and region</span></h1>
<h1>I<span class="smaller">NNOVATION - Embracing new ideas and methods to improve service delivery</span></h1>
<h1>O<span class="smaller">PEN - Spirit of accessibility in policy making and operation</span></h1>
<h1>N<span class="smaller">EIGHBORLY - Concern and compassion for others</span></h1>
答案 2 :(得分:1)
要实现布局,您需要第一个字母,理想情况下,需要具有相同的宽度(等宽字体)。
然后你可以将它们声明为内联块并添加填充。
@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);
h1 {
font-size: 1rem;
}
h1:first-letter {
font-family: 'Droid Sans Mono';
display: inline-block;
padding-right: .5rem;
font-size: 150%;
}
<h1>RESPONSIVE - Prompt to respond and serve</h1>
<h1>EFFICIENT - Highest performance at greatest economy</h1>
<h1>GREATER GOOD - Serve for the good of the community and region</h1>
<h1>INNOVATION - Embracing new ideas and methods to improve service delivery</h1>
<h1>OPEN - Spirit of accessibility in policy making and operation</h1>
<h1>NEIGHBORLY - Concern and compassion for others</h1>
作为替代方案,修改结构,它变得更简单,不需要特殊字体。
h1 {
font-size:1rem;
}
h1 span {
display: inline-block;
width: 1.5rem;
font-size:1.5rem;
}
<h1><span>R</span>ESPONSIVE - Prompt to respond and serve</h1>
<h1><span>E</span>FFICIENT - Highest performance at greatest economy</h1>
<h1><span>G</span>REATER GOOD - Serve for the good of the community and region</h1>
<h1><span>I</span>NNOVATION - Embracing new ideas and methods to improve service delivery</h1>
<h1><span>O</span>PEN - Spirit of accessibility in policy making and operation</h1>
<h1><span>N</span>EIGHBORLY - Concern and compassion for others</h1>