Html 在同一行/线上水平对齐中心、左侧和右侧的三个元素

我们有一个包含三个子元素的容器：

<div class="container">
  <div class="box-a">some content</div>
  <div class="box-b">other content</div>
  <div class="box-c">some other content</div>
</div>

一些内容
其他内容
其他一些内容

我们希望避免使用浮动，我们希望对齐页面

左侧
部分的
box-a
，
box-b
中间
，以及页面
右侧
部分的
box-c

所有三个子元素都可以有一些填充/边距和背景色

到目前为止，我们使用了display:inline块，但是由于文本对齐应该在“container”元素中设置，所以我们只能选择一种对齐方法

下面是它的外观
您可以使用
内联块
属性以及
文本对齐
值
对齐
。试试这个：

.container {
    text-align:justify;
}
.container > div {
    display:inline-block;
}

但为了使其正常工作，您需要使用伪元素进行一些修复：

.container:after {
    content:" ";
    display:inline-block;
    width:100%;
}

检查下面的代码段


.container{
文本对齐：对齐；
}
.container>div{
显示：内联块；
线高：30px；
填充：0 10px；
背景：#000；
颜色：#fff；
}
.货柜：之后{
内容：“；
显示：内联块；
宽度：100%；
}

一些内容
其他内容
其他一些内容
div自然希望扩展以填充整个行。如果你想让它们都在同一条线上，那么你就必须限制它们的宽度，或者改用跨距，或者切换到显示：inline block，诸如此类的添加了更多的说明。显示内联块可以很好地工作，但当你想要组合对齐方法时就不行了：请详细说明你使用浮点数，你必须在任何地方使用它们……你摇滚；“fix”之后的逻辑是什么？@GeorgeKatsanos justify属性使最后一行文本左对齐。。。因此，通过修复，我们强制after元素成为最后一行，使其他元素（如内容）对整个宽度进行调整。奇怪的是，尽管我在实际用例中使用了完全相同的CSS，但它不起作用。元素改为左对齐。@GeorgeKatsanos如果您可以在JSFIDLE或codepen上复制代码。。。然后我可以检查并帮助你：）@GeorgeKatsanos你打断了我的头XD。。问题是它将表单和lsit显示为单个单词。。。在div和表单之间有一个空格，就像两个单词一样，这样就可以了