Question

如何将两个不同尺寸的线条水平对齐，它们之间没有空格？

像 See here我希望行之间没有空格意味着APP在5M后完全下载

我尝试了以下内容：

＆＃13;

.text
{
  color:white;
}
.big
{
  font-size:5em;
}
.small
{
  font-size:2em;
  display:inline-block;
}

＆＃13;

<div class="text">
  <span class="big">52M</span>
  <span class="small">App Downloads</span>
</div>

＆＃13;

Answer 1

尝试在它们之间添加间隔，以便将它们分开。

<style>
.text
{
   color:white;
}

.big
{
    font-size:5em;
}

.small
{
   font-size:2em;
   display:inline-block;
}
</style>

<div class="text">
  <span class="big">52M</span>
    <br>
    <br>
  <span class="small">App Downloads</span>
</div>

Answer 2

你可以使用display：block和float left：

来完成

 .text {
    color:white;
    background-color: red;
    float: left;
    width: 300px;
    text-align:center;
  }

span {
   display: block;
   width:100%;
   float:left;
   margin: 0px;
}

Answer 3

也许你可以使用＆＃39; flex-box＆＃39;并改变“线高”＆＃39; span元素的值。这是一个可能的解决方案。

Example

.text
{
  width:20%;
  height:20%;
  padding:5%;
  background:red;
  color:white;
  display:flex;
  flex-direction:column;
}
.big
{
  font-size:5em;
  line-height:0.8em;
  margin:auto;
}
.small
{
  font-size:2em;
  margin:auto;
}

Answer 4

尝试使用white-space：nowrap

<style>
.text
{
  color:white;
  white-space: nowrap;
}
.big
{
  font-size:5em;
}
.small
{
  font-size:2em;
  display:inline-block;
}

</style>

Answer 5

使用text-align：center。

试试这个：http://codepen.io/r3npi2/pen/vKmgZG

.text
{
  color:white;
  background-color:red;
  display:inline-block;
  text-align:center;
}
.big
{
  font-size:5em;
  display:block;
}
.small
{
  font-size:2em;
  display:block;
}

Answer 6

我假设你希望他们在彼此之下...这个问题并不是很清楚。

你需要做的就是将span元素更改为块元素，可以通过CSS或者 - 我更喜欢简单的原因 - 将它们更改为div。然后，给周围的div一个text-align：center（以及一个background-color来查看结果），然后你就完成了！

＆＃13;

container

＆＃13;

.text {
  background-color: #d00;
  color: white;
  text-align: center;
}
.big {
  font-size:5em;
}
.small {
  font-size:2em;
}

＆＃13;

如何逐个放置两条水平线，不同的尺寸在同一个div中居中对齐？

6 个答案: