如何将我的2个文本对齐在同一行？

Question

我试图实现简单的事情，规则使其变得非常重要。这是我的fiddle。对于我来说，以自然的方式对齐元素并非易事，我认为当我创建float:left时元素应该在同一行。

Answer 1

Hx元素具有默认边距。

＆＃34;空间＆＃34;来自H1元素的margin-top属性的最高原因。 考虑使用reset.css文件重置这些默认值。 另一件事是line-height属性。

总结：

• margin-top:0;
• line-height: 20px;（选择符合您需求的值）

http://jsfiddle.net/ynrmwgt9/4/

Answer 2

我建议您将div打包在容器div 中。有点像 bootstrap 系统。

请参阅小提琴，并询问我是否对以下问题有疑问。）

我使用的是这样的东西：

<div class='row'>
    <div class='col'>Content 1</div>
    <div class='col'>Content 2</div>
</div>

样式表必须指定row填充100％的宽度，并指定两列，一半，然后各50％。

.row
{
    width:100%;
}

.col
{
    width:50%;
    float:left;
    text-align:center;
}

文字对齐中心只是为了让它美丽

http://jsfiddle.net/ynrmwgt9/2/