Question

我有一个有登录/注册文本的课程。文本字体样式为斜体。我想知道如何在＆＃34; login＆＃34;之间建立行（|）。并且＆＃34;注册＆＃34;定期但保持剩余的文本斜体。另外，我们可以通过将三个内容（登录，|，注册）保持在同一个类中来实现这一目标吗？

此时，所有三件事（登录，|，注册）都是斜体。我使用的HTML和CSS代码是：

＆＃13;

li.login-signup {
  font-style: italic;
  font-size: 12px;
  font-family: Adelle PE;
  letter-spacing: .30em;
}

＆＃13;

<li class="login-signup">Log In | Sign up</li>

＆＃13;

Answer 1

唯一的方法是： <li class="login-signup">Log In <span class="regular">|</span> Sign up</li>

然后添加class .regular {font-style：normal;}

Answer 2

我可以建议如下：

＆＃13;

.login-signup {
  list-style: none;
  font-style: italic;
  font-size: 12px;
  font-family: Adelle PE;
  letter-spacing: .30em;
}

.login-signup li {
  float: left;
  padding: 0.1em 0.8em;
}

.login-signup li:first-child {
  border-right: 1px solid #000;
}

＆＃13;

<ul class="login-signup">
    <li>Log In</li>
    <li>Sign up</li>
</ul>

＆＃13;

使用两个<li>元素，因为您似乎有两个导航选项（即使它们恰好在目前也是如此）
使用CSS（border-right）代替内容（＆＃34; |＆＃34;）作为分隔符

这样可以在语义上改进您的标记，并为您提供更多关于样式的灵活性。

在2个正常文本

2 个答案: