Question

我正在努力使导航链接的前两个字母的字体大小更大。我知道第一封信可以用:first-letter来实现。但是我尝试使用下面的跨度，它增加了字体大小但没有水平对齐。关于和联系人链接正在向上移动，两者都应与其余链接（从底部）对齐。我不想将行高设置为主容器，因为子链接应该显示在主链接下面。有什么想法吗？

<li><a href="#"><span>01</span> Architectural Design</a></li>

CSS

ul li a span{
  font-size:25px;
}

JSFiddle

Answer 1

你可以试试这个...老派但很有用

<div class="nav">
    <ul>
        <li><a href="#"><span>&nbsp;</span>About</a></li>
        <li><a href="#"><span>01</span> Architectural Design</a></li>
        <li><a href="#"><span>02</span> Media</a></li>
        <li><a href="#"><span>03</span> Developments</a></li>
        <li><a href="#"><span>&nbsp;</span>Contact</a></li>
    </ul>
</div>

Answer 2

如果您将vertical-align:top添加到span，则会将span后的字词与span的顶部对齐

Fiddle

其他属性包括

middle
bottom
baseline

Answer 3

我会设置li元素的行高。

li{
    font-size:12px;
    float:left;
    margin-right:30px;
    line-height: 25px;
}

JSFiddle

我知道你提到过你

不想将行高设置为主容器

但这对你有用吗？

Answer 4

它只能与伪元素:before一起使用，这些伪元素可使您的代码更简洁，更易于阅读。

.empty:before {
  content: "";
  font-size: 25px;
}

.nav {
  font-family: arial;
  background: #dddddd;
  overflow: hidden;
  padding: 10px;
}

a {
  color: #000;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  font-size: 12px;
  float: left;
  margin-right: 30px;
}

ul li a span {
  font-size: 25px;
}

<div class="nav">
  <ul>
    <li><a class='empty' href="#">About</a></li>
    <li><a href="#"><span>01</span> Architectural Design</a></li>
    <li><a href="#"><span>02</span> Media</a></li>
    <li><a href="#"><span>03</span> Developments</a></li>
    <li><a class='empty' href="#">Contact</a></li>
  </ul>
</div>

如何增加任何单词/句子前两个字母的字体大小？

4 个答案: