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

标签 javascript html css

<分区>


想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post .

关闭 3 年前

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

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

最佳答案

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

#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>

关于javascript - 将 HTML 文本放在特定位置但在同一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59414270/

上一篇:css - 浏览器使用什么 CSS 来设置无效 &lt;input type ="email"> 的样式?

下一篇:CSS 显示 :content not working in Safari

相关文章:

javascript - ie理解的json数据格式是什么?

jquery - HighCharts 参数含义 - plotX,plotLeft,shapeArgs

CSS 位置固定在左侧但不是顶部

html - 在 Angular 中选择时如何检索 id 和名称?

javascript - Omniture 跟踪和 jQuery

css - Bootstrap 中的静态水平导航栏与内容区域重叠

javascript - 使用 QJSEngine 在 Qt 中执行 Javascript 的速度

javascript - 手动触发的 JavaScript 事件不会针对 iFrame 上下文中的元素传播

javascript - 在 testCollision 函数之后查找矩形的哪一侧发生碰撞

javascript - Handlebars helper 比较两个数组并返回差异