如何在同一行上对齐2个文本？

Question

I'm trying to achieve something simple and the rules make it non-trivial. Here is my fiddle . It is non-trivial for me to align the elements in a natural way, I think the elements should be on the same row when I make a float:left .

Answer 1

Hx elements have default margins.

The "space" from the top cause by the margin-top property of the H1 element. Consider using a reset.css file to reset those default values. Another thing is the line-height property.

In conclusion:

• margin-top:0;
• line-height: 20px; (choose a value that fits to your needs)

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

Answer 2

I would recommend to wrap your div in a container div . A little bit like bootstrap system.

See the fiddle, and ask me if you have questions about :)

I'm using something like this :

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

The stylesheet has to specify that row fill 100% of the width, and your two columns, the half, then 50% each.

.row
{
    width:100%;
}

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

Text align center is just for make it beautiful

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