HTML
<h1>Skill Ratings <span>(scale of 5)</span></h1>
CSS
h1 span { font-size:16px; }
문제
I am trying to have a heading and then some less important text on the same line:
(scale of 5)
but I really want (scale of 5)
to be in the same line as well as that Skill Ratings
be wrapped in the <h>
tags for document structure semantics.
I am tight on real estate so I don't want another line, (scale of 5)
will be linked to a CSS style.
Is this possible? If not, I will chose to not have Skill Ratings
as a heading but would prefer that it be.
해결책
HTML
<h1>Skill Ratings <span>(scale of 5)</span></h1>
CSS
h1 span { font-size:16px; }
다른 팁
You can use Lowkase's answer, or if for some reason you needed to separate the elements into Headings and Paragraph tags, you could do this:
<h1>Skill Ratings </h1>
<p>(scale of 5)</p>
Then here is the css:
.h1 { display: inline; }
.p { display: inline; }
Lowkase's solution is more semantic, so it's probably a better solution, but this is another way to do it.
Sorry, I just noticed you wanted it in the header tag, which means use Lowkase's answer.
Just make your <h1>
display:inline. This way, it will render in the normal text flow.
<h1>Skill Ratings </h1>(scale of 5)
h1 {
display:inline
}