在同一行HTML / CSS上获取文本

时间:2014-04-16 09:12:55

标签: html css web line

如何将地址放在“与我联系:”的同一行?我也希望他们之间有一个空间。我在考虑使用浮子,坚果是不是有点矫枉过正?

<p>Contact me on: 
<address> 
<a href="mailto:me@gmail.com"> 
me@gmail.com
</address>
</a>
</p>

http://jsfiddle.net/tY9nS/

提前致谢

3 个答案:

答案 0 :(得分:7)

你的html 更改为

<address> 
<p>Contact me on: <a href="mailto:me@gmail.com"> 
me@gmail.com</a></p>
   </address>

请勿将address标记放入p标记,将p标记放入address标记

<强> demo

答案 1 :(得分:2)

我不是100%确定为什么会这样,但是浏览器不允许在p标记中使用地址标记。

你可以使这项工作,但你需要删除p {width:100%}。 由于浏览器一个接一个地设置地址和p标签,你的p标签将消耗100%的宽度,因此没有更多空间用于地址。

将样式更改为:p,address {display:inline-block;}并且它可以正常工作

答案 2 :(得分:-2)

另一种简单的方法是在这样的表中格式化它:

<table>
<tr>
<td>Contact me on:</td>
<td><a href="mailto:me@gmail.com">me@gmail.com</a></td>
</tr>
</table>

否则,您可以使用div元素进行布局,这是一个更复杂的选项:http://www.w3schools.com/html/html_layout.asp