正确对齐Divs - HTML/CSS

Question

#left {
  float: left;
  width: 15%;
  overflow: hidden;
}

#right {
  float: left;
  width: 60%;
  overflow: hidden;
}

#cen {
  display: inline-block;
  width: 5%;
  overflow: hidden;
}

#container {
  width: 100%;
  text-align: center;
}

<div id="container">
  <h1>
    <div align="center" id="cen">+</div>
  </h1>
  <h1>
    <div align="center" class="Area" id="left">1</div>
  </h1>
  <h1>
    <div align="center" class="Phone" id="right">650000</div>
  </h1><br>
</div>

灰色区域是我的容器DIV Top是我拥有的底部是我想要的.

我没有做任何事情,或者将一个div推到下一行.我很沮丧,我要打碎我的电脑

Answer 1

为什么不简单地使用跨度和一些余量:

h1 {
  text-align: center;
}

span {
  margin: 10px;
}

<h1><span>+</span><span>1</span><span>650000000</span></h1>

然后,您可以通过添加一些类来更改单个边距