时间戳

首页 > 解决方案 > 将 HTML 文本放在特定位置但在同一行

javascript - 将 HTML 文本放在特定位置但在同一行

问题描述

我是 HTML 的新手，所以请原谅缺乏知识。我目前正在尝试建立一个小网站，我希望用户可以单击三个部分，将用户引导到网站的不同部分。简单地说，我想要三个部分，左对齐、居中对齐和右对齐，并且能够显示在同一行上。然而，每次我尝试这样做时，我都会在左侧设置一个部分，然后我可以在中间和右侧获得一个部分，但它会在另一条水平线上进行。

我怎样才能让所有三个部分都在同一条水平线上，并且只是在左边、右边和中间？

标签： javascripthtmlcss

解决方案

诀窍是使用，display: inline-block尽管有很多方法可以做到这一点。
建议您研究一下flexbox，因为这将使您未来的编码生活更加轻松。

#container {
  width: 100%;
  height: 500px;
  text-align: center;
}

#left,
#center,
#right {
  width: 20%;
  height: 100%;
  display: inline-block;
}

#left {
  background-color: red;
}

#center {
  background-color: green;
}

#right {
  background-color: blue;
}
<div id='container'>
  <div id='left'></div>
  <div id='center'></div>
  <div id='right'></div>
</div>

推荐阅读