html - 在html中写两个以/分隔的项目

Question

我想在标题中写下这两个地址，我尝试了这段代码，但“/”没有放在同一行。谁能帮我修一下？

<header>
    <nav class="header">
        <h1>CRIS</h1>
        <p class="light_grey">Art direction design</p>
        <div class="address">
            <address>Call me ([phone]</address>
            <p>/</p>
            <address>[e-mail]</address>
        </div>

        <p>Menu</p>
    </nav>
</header>

这是CSS代码：

.header {
    justify-content: space-around;
    display: flex;
    }

.address {
   display: flex;
   justify-content: space-around;
   }

标签： htmlcss

Answer 1

你需要添加align-items: center到它：

.address {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

<div class="address">
    <address>Call me ([phone]</address>
    <p>/</p>
    <address>[e-mail]</address>
</div>

因为默认情况下，<p>标签应用了一些垂直边距，您也可以设置.address p { margin: 0; }摆脱它。