排成三个标题。一个在左边，第二个在中间，第三个在右边？

Question

我有三个标题，就像这样...

<div>
  <h4>first</h4>
  <h4>second</h4>
  <h4>third</h4>
</div>

如何让它们在同一条线上，第一条在左侧，第二条在中间，第三条在右侧？

Answer 1

不确定你究竟在寻找什么 检查此代码段

＆＃13;

＆＃13;

div{
  display:flex;
  justify-content:space-between;
  border:1px solid red;
  width:200px;
}

＆＃13;

<div>
  <h4>first</h4>
  <h4>second</h4>
  <h4>third</h4>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助

Answer 2

编辑/全新答案（我没有注意到左/中/右）：

将flexbox与justify-items: space-between;

一起使用

＆＃13;

＆＃13;

div {
  display: flex;
  justify-content: space-between;
  }

＆＃13;

<div>
  <h4>first</h4>
  <h4>second</h4>
  <h4>third</h4>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您正在寻找float属性

您可以阅读其规范on MDN或了解其在this fairly comprehensive article ("All about floats" on css-tricks.com)中的用法。

基本上，该属性告诉浏览器元素应该从指定的方向开始布局，同时占用尽可能少的空间。 （实际上它比这复杂得多，但除了基本用法之外的任何东西都超出了我认为的这个问题的范围）

将宽度设置为容器的三分之一并将文本居中放在标题上并且您已经得到了所需的东西。

CSS

＆＃13;

＆＃13;

h4 {
  float:left;
  width: 33.3%;
  text-align:center;
}

＆＃13;

<div>
  <h4>first</h4>
  <h4>second</h4>
  <h4>third</h4>
</div>

＆＃13;

＆＃13;

＆＃13;

附录

正如其他人已经指出的那样，flexbox (MDN link)也是一个不错的选择，但有更多的怪癖和支持更多的是零星而不是花车。另外，在跳上flexbox旅行车之前掌握花车是一个好主意。