Question

我试图将名称和地址放在同一行，右边是地址方式，左边是标题。它正在做的是将地址放在一行而不是与名称相同的行。我怎样才能解决这个问题？这是代码：

<p>
<span id="name">First Last</span> 
<span id="address">123 Address Rd.</span>
</p>


#name{
font-size:18px;
float:left;
color:white;
padding-top:30px;

}
#address{
float:left;
font-size:12px;
padding-left:400px;
color:white;
width:300px;
}

Answer 1

＆＃13;

<div style="text-align:right;width:100%">
    <span style="float:left">Left text</span>
    Right text
</div>

＆＃13;

这些元素将显示在同一行中，您甚至可以将父级的div文本对齐设置为左侧，并使跨度向右浮动！像

<div style="text-align:left;width:100%">
<span style="float:right">Right text</span>
Left text
</div>

Answer 2

您只需删除float:left;，文本就会按预期排列。请参阅以下代码段：

#name{
font-size:18px;
color:blue;
padding-top:30px;

}
#address{
font-size:12px;
padding-left:400px;
color:red;
width:300px;
}

<p>
<span id="name">First Last</span> 
<span id="address">123 Address Rd.</span>
</p>

如果你绝对需要float:left;，你也可以通过确保较小文本的top-padding具有正确的偏移量来获得同一级别的文本，即较小的字体具有更多top-padding。您还需要确保文本与右侧对齐：

#name{
font-size:18px;
float:left;
padding-top:30px;
color:red;  
}
#address{
font-size:12px;
padding-top:36px;
float:left;
text-align:right;  
width:300px;
color:red;
}

<p>
<span id="name">First Last</span> 
<span id="address">123 Address Rd.</span>
</p>

Answer 3

如果浮动元素，则需要添加相同的行高和填充以使它们在一行中对齐。

如何将两个span标签放在同一条线上？

3 个答案: