I have html code that looks like this:
<h3>Corruption, the most infallible symptom of constitutional liberty.</h3>
<p>~ Edward Gibbon</p>
The resulting output is below:
As I pointed out w/ the arrow, I don't want Edward Gibbon below the quote, but preferably to the right of "liberty".
Is this possible, if I have h3 tags involved? Should I be using span or div tags? Any guidance would be greatly appreciated!
Updated solution in case anybody needs this in the future (via Greg Jennings):
<h3>Corruption, the most infallible symptom of constitutional liberty. <span
class="parastyled" style="font-size: 10px;">~ Edward Gibbon</span></h3>
The resulting output is below:
Just make them inline!
h3, p{
display: inline;
}
Note, you probably don't want this to affect all p's and h2's so i'd do this:
<div class="same-line">
<h2>blah balh</h2>
<p>blah</p>
</div>
CSS:
.same-line p, .same-line h2{
display:inline;
}
You can change the display type of the p and h3 tags
HTML:
<h3 class="sameline">Corruption, the most infallible symptom of constitutional liberty.</h3>
<p class="sameline">~ Edward Gibbon</p>
CSS:
<style type="text/css">
.sameline {
display: inline;
}
</style>
You should use the correct tools for the job.
This is a quote, it belongs in a blockquote
:
HTML:
<blockquote>
<p>Corruption, the most infallible symptom of constitutional liberty.</p>
<p class="byline">~ Edward Gibbon</p>
</blockquote>
CSS:
blockquote { font-weight: bold;
font-size: 20px; }
blockquote p { display: inline-block; }
blockquote p.byline { font-weight: normal;
font-size: 12px; }
Use a span inside the tag with the style you want. You need an inline element here.
<h3>Corruption, the most infallible symptom of constitutional liberty. <span class="parastyled">~ Edward Gibbon</span></h3>
<h3>
is a block element, it will use all the available width. You could use a span
inside the h3
instead of the p
. Or you could replace the h3
with an inline
element.
p {
display:inline;
float:none;
}
try the following css
h3,p{
float:left;
width:auto;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.