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

Question

我有 4 个 div。我在另一个 div 中有 3 个 div，我试图将它们左、中、右对齐，同时将它们都保持在同一条线上。我试过内联 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>

Answer 1

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

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