如何排队

Question

我正在努力为HTML排队。相反，我把它们放在彼此之上。我真正想要的是让他们像网站一样彼此相邻（在顶部你可以选择6件事，他们会把你带到网站的不同部分）。

#home {
  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 100px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
}

#home:hover {
  background: #6495ED;
  border-radius: 50px;
  margin: auto;
  width: 105px;
  line-height: 55px;
  text-align: center;
  font-size: 22.5px;
  cursor: pointer;
}

#Alt {
  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 100px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
}

#Alt:hover {
  background: #6495ED;
  border-radius: 50px;
  margin: auto;
  width: 105px;
  line-height: 55px;
  text-align: center;
  font-size: 22.5px;
  cursor: pointer;
}

<div id="home">Home</div><div id="Alt">test</div>

Answer 1

<div>自然地叠加在一起，因为它们默认显示block显示。

为了排列它们，您可以考虑为inline-block和#home设置#Alt显示：

#home, #Alt {
  display: inline-block;
  vertical-align: middle;
}

您还可以添加vertical-align: middle以便在悬停时获得更好的外观（如另一个答案所示）。

#home {
  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 100px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
}

#home:hover {
  background: #6495ED;
  border-radius: 50px;
  margin: auto;
  width: 105px;
  line-height: 55px;
  text-align: center;
  font-size: 22.5px;
  cursor: pointer;
}

#Alt {
  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 100px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
}

#Alt:hover {
  background: #6495ED;
  border-radius: 50px;
  margin: auto;
  width: 105px;
  line-height: 55px;
  text-align: center;
  font-size: 22.5px;
  cursor: pointer;
}

#home, #Alt {
  display: inline-block;
  vertical-align: middle;
}

<div id="home">Home</div>
<div id="Alt">test</div>

Answer 2

如上所述，您可以使用display : inline-block来获取块元素的水平对齐。

我还添加了vertical-align : center以便在悬停时保持居中位置，因为尺寸会发生变化。如果需要，您可以将center更改为top或其他值。

我还删除了多余的CSS规则，将CSS缩小到原始大小的一半左右。

＆＃13;

＆＃13;

#home, #Alt {
  background: #5F9EA0;
  border-radius: 25px;
  margin: auto;
  width: 100px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;

  display: inline-block;
  vertical-align: center;
}

#home:hover, #Alt:hover {
  background: #6495ED;
  border-radius: 50px;
  width: 105px;
  line-height: 55px;
  font-size: 22.5px;
  cursor: pointer;
}

＆＃13;

<div id="home">Home</div><div id="Alt">test</div>

＆＃13;

＆＃13;

＆＃13;