<分区>
标签 javascript html css
我是 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/
相关文章:
javascript - ie理解的json数据格式是什么?
jquery - HighCharts 参数含义 - plotX,plotLeft,shapeArgs
html - 在 Angular 中选择时如何检索 id 和名称?
javascript - Omniture 跟踪和 jQuery
css - Bootstrap 中的静态水平导航栏与内容区域重叠
javascript - 使用 QJSEngine 在 Qt 中执行 Javascript 的速度
javascript - 手动触发的 JavaScript 事件不会针对 iFrame 上下文中的元素传播