使用 span、text align 和 inline-block、CSS、HTML 将文本左、中、右对齐答案

【问题标题】：Aligning text to the left, middle, right using span, text align, and inline-block, CSS, HTML使用 span、text align 和 inline-block、CSS、HTML 将文本左、中、右对齐
【发布时间】：2015-10-07 11:21:05
【问题描述】：

我有 4 个 div。我在另一个 div 中有 3 个 div，我试图将它们对齐到左侧、中间和右侧，同时将它们都保持在同一条线上。我已经尝试过 inline-block，但由于某种原因它不起作用。我不确定我做错了什么，所以请看一下我的代码：

 

#outer {
    border: 1px solid black;
    width: 500px;
    height: 500px;
}
#innerLeft {
    text-align:left;
    border: 1px solid black;
    display: inline-block;
    width: 100%;
}
#innerMiddle {
    text-align:center;
    border: 1px solid black;
    display: inline-block;
    width: 100%;
}
#innerRight {
    text-align:right;
    border: 1px solid black;
    display: inline-block;
    width: 100%;
}
span {
    border: 1px solid red;
}

<div id='outer'>
  <div id='innerLeft'><span>Left</span></div>
  <div id='innerMiddle'><span>Middle</span></div>
  <div id='innerRight'><span>Right</span></div>
</div>

【问题讨论】：

那么现在您希望它们都在同一行吗？昨天他们需要在不同的行。
@j08691 其实我两个都需要，但是昨天忘记提了。

标签： html css

【解决方案1】：

要将它们全部放在同一行上，您不需要我在上一个问题中建议的跨度，但您确实需要更改 div 的顺序。然后你只需将左右元素浮动到各自的一边。

#outer {
  border: 1px solid black;
  width: 500px;
  height: 500px;
  text-align: center;
}
#innerLeft {
  float: left;
  border: 1px solid black;
}
#innerMiddle {
  border: 1px solid black;
  display: inline-block;
}
#innerRight {
  float: right;
  border: 1px solid black;
}

<div id='outer'>
  <div id='innerLeft'>Left</div>
  <div id='innerRight'>Right</div>

  <div id='innerMiddle'>Middle</div>
</div>

【讨论】：

为什么要改变div的顺序？
因为你需要将左右 div 浮动到一边，这样中间的 div 才能在它们之间浮动。
您不必更改标记。只需将它们全部浮起来-检查我的答案中的小提琴。

【解决方案2】：

使用当前结构的一种方法是提供包装 div position: relative 和内部 div position: absolute

JS Fiddle

具有absolute 定位的元素相对于它们的第一个非static 祖先元素进行定位。 CSS Position Property

【讨论】：

【解决方案3】：

这是因为在所有 divs 中，您在 css 中添加 width:100%，这允许 divs 使用其 parent 占用所有可用宽度。所以尽管 inline block 他们占用了整个宽度那里的父母。

【讨论】：

【解决方案4】：

这是因为您将宽度设置为 100%。它们将占据其包含元素宽度的 100%——因此每行一个。将宽度更改为 33.33%，你会得到你想要的。

如果您遇到边框问题，请尝试使用box-sizing: border-box：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

#outer {
    border: 1px solid black;
    width: 500px;
    height: 500px;
    box-sizing: border-box;//add this
}
#innerLeft {
    text-align:left;
}

#innerRight {
    text-align: right;
}

#innerMiddle {
    text-align: center;
}

#innerRight, #innerMiddle, #innerLeft {
    border: 1px solid black;
    display: inline-block;
    width: 33.33%;//change this
    float: left;//add this (reliable way of getting rid of inline-block gap)
    box-sizing: border-box;//add this
}
span {
    border: 1px solid red;
}

小提琴：https://jsfiddle.net/0wuzgcba/

【讨论】：

您还需要删除通过显示为 inline-block 添加的空白。
对。更新答案。