如何将文本与背景颜色对齐？

Question

第一次在论坛发帖。 我是编程初学者，目前正在学习网络开发。 我在尝试重新创建 Google 主页时偶然发现了这个问题。

这是我正在尝试修复的导航栏。

注册列表之前已正确对齐，但是，当我添加背景颜色时。它超出了对齐范围。到底如何使其与其余导航栏元素对齐？

html:

.btn {
  background-color: #1a73e8;
  color: white;
  align-self: center;
  border-radius: 4px;
  padding: 7px 25px;
}

<header>
  <ul class="menu">
    <li class="about">About</li>
    <li class="store">Store</li>
    <li class="gmail">Gmail</li>
    <li class="images">Images</li>
    <li class="btn">Sign in</li>
  </ul>
</header>

Answer 1

基本上，与所有其他 li 类相比，

btn

类具有不同的属性。在这种情况下，您需要做的是向容器

header

提供一些关于如何对齐所有子项的指令。为标题分配一个类并设置其样式。

.headerClass {
   display: flex;
   align-items: center; /* This will align vertically in the center all the children elements */
   padding: 20px 0; /* Give a bit of padding to make the button breath */
}

然后我建议不要使用类来设置每个 li 元素的样式，而只需使用它们共同具有的属性来设置它们的样式，例如：

.headerClass ul li /* This will style only the li elements inside the header */
     width: 100%;
     display: flex;
     justify-content: center; /* this will horizontally center all the elements inside the li */
}

然后，如果您需要在最后一个列表项中添加按钮，只需这样编写 html 即可。

<header class="headerClass">
    <ul>
        <li><a href="#>About</a></li>
        <li><a href="#>Store</a></li>
        <li><a href="#>Gmail</a></li>
        <li><a href="#>Images</a></li>
        <li><a href="#"><button class="btn">Sign In</button></a></li>
    </ul>
</header>

从 HTML 角度来看，列表项不是交互式元素，因此您不需要在其中写入任何文本，它们只是链接、按钮等的容器。基本上，例如，当单击“关于”时，您是单击链接，以便将其写入

a

标签是正确的。

如果你想为无序列表中的所有链接设置样式，你可以这样做：

.headerClass ul li a {
    color: red;
}

.headerClass ul li a:hover {
    color: yellow;
}

Answer 2

取决于代码的其余部分，特别是对于

ul

容器。如果

ul

没有自己的任何 CSS，请制作

li

的内联块，如下所示。然后所有

li

元素将默认在其（文本）基线对齐：

ul.menu li {
  display: inline-block;
  margin: 0 1em;
}

.btn {
  background-color: #1a73e8;
  color: white;
  border-radius: 4px;
  padding: 7px 25px;
}

<header>
  <ul class="menu">
    <li class="about">About</li>
    <li class="store">Store</li>
    <li class="gmail">Gmail</li>
    <li class="images">Images</li>
    <li class="btn">Sign in</li>
  </ul>
</header>

如果

ul

是 Flex 容器，请将

align-items: baseline;

添加到 Flex 容器（即

ul

）：

ul.menu {
  display: flex;
  align-items: baseline;
}
ul.menu li {
  margin: 0 1em;
}

.btn {
  background-color: #1a73e8;
  color: white;
  border-radius: 4px;
  padding: 7px 25px;
}

<header>
  <ul class="menu">
    <li class="about">About</li>
    <li class="store">Store</li>
    <li class="gmail">Gmail</li>
    <li class="images">Images</li>
    <li class="btn">Sign in</li>
  </ul>
</header>

Answer 3

.btn 样式有align-self: center;，它不适用于此布局，因为align-self 只能在Flex 容器内工作。

ul {
  list-style-type: none;
  
}

li {
  float: left;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 7px 25px;
  text-decoration: none;
}


.btn{ 
  background-color: #1a73e8;
  color: white;
  align-self: center;
  border-radius: 4px;
  padding: 7px 25px;
}

<ul>
  <li><a class="active" href="#about">About</a></li>
  <li><a class="store" href="#store">Store</a></li>
  <li><a class="gmail" href="#gmail">Gmail</a></li>
  <li><a class="images" href="#images">Images</a></li>
  <li><a class="btn" href="#btn">Sign in</a></li>
</ul>