首先将文本与大字母对齐

时间:2015-03-02 15:33:43

标签: css

我有一个分组文本,用户希望每行的第一个字母垂直拼写一个单词。

- [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很弱,有人可以指出我正确的方向吗?

3 个答案:

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