在同一行文本上对齐不同的字体大小以使其看起来不错？

Question

基本上，我希望在同一行上有一个 h1 和 ap 元素，但是对齐方式偏离了很多（意味着 H1 高于 P 并且看起来很糟糕）而且我从来没有做过这样的事情之前用css！

我已经拼凑了一个 jsfiddle 来配合这个，这里是代码：

<h1 style="float:left;display:inline;">"Hi!</h1><p style="float:left;display:inline;">I'm James, and I <strong>LOVE</strong> building clean, fast and (most importantly) effective websites. Oh, and I also know a thing or two about computers.</p><h1 style="float:left;display:inline">"</h1>

http://jsfiddle.net/9H8xE/

谢谢！

Answer 1

问题中代码的技术问题是float: left阻止display: inline生效，改为setting display to block，所以删除所有float: left声明。

另一个问题是，您在p 元素之后将右引号作为h1 元素的内容。这是非常不合逻辑的。技术含义是这个字符将以h1的字体大小出现，导致行间距不均匀，除非你将h1字体大小设置为与p字体大小相同。你需要决定你想要什么：为什么要在正常大小的文本之后有一个大尺寸的结束引号，如果你这样做，它应该如何呈现？

Answer 2

回答前的一些建议：

1. P 标签是用来创建一个新段落的，所以如果你不需要它，可以使用 span 标签。
2. 尽量避免使用内联样式，使用 CSS 选择器。

http://jsfiddle.net/9H8xE/1/

试试这个，如果它告诉我works

HTML：

<h1 >"Hi!</h1><p>I'm James, and I <strong>LOVE</strong> building clean, fast and (most importantly) effective websites. Oh, and I also know a thing or two about computers.</p><h1>"</h1>

CSS：

p
{
    display:inline;
}
h1{
    display:inline
}