0

我正在尝试使导航链接的前两个字母的字体更大。我知道第一个字母可以使用:first-letter. 但是我已经尝试过使用如下所示的 span 并且它增加了字体大小但没有水平对齐。About和Contact链接移到顶部，两者都应与其余链接对齐（从底部开始）。我不想将 line-height 设置为主容器，因为子链接应该显示在主链接下方。对此有任何想法吗？

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

CSS

ul li a span {
  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 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 href="#">Contact</a></li>
  </ul>
</div>

4

4 回答 4

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>
于 2013-08-25T17:14:40.183 回答
0

如果添加vertical-align:top到span，它会将后面的单词对齐span到顶部span

小提琴

其他属性包括

middle
bottom
baseline
于 2013-08-25T15:37:26.813 回答
0

我会设置 li 元素的行高。

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

JSFiddle

我知道你提到你

不想将 line-height 设置为主容器

但这对你有用吗？

于 2013-08-25T15:38:10.713 回答
0

它只能与: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>

于 2020-02-18T07:48:31.367 回答