HTML and CSS Reference
In-Depth Information
By default, elements such as anchors
<a>
, images
<img>
, and quotes
<q>
are inline-level.
List of Inline Elements
The following elements are inline by default:
•
<b>, <big>, <i>, <small>, <tt>
•
<abbr>, <acronym>, <cite>, <code>, <dfn>, <em>, <kbd>, <strong>, <samp>, <var>
•
<a>, <bdo>, <br>, <img>, <map>, <object>, <q>, <script>, <span>, <sub>, <sup>
•
<button>, <input>, <label>, <select>, <textarea>
Prior to giving the Cool Shoes & Socks page a
max-width
declaration in Chapter 5, you may have noticed some
inline-level elements.
Figure 9-5 shows that the image and More Information button in the product showcase are both inline-level, posi-
tioning them side by side (the More Information button breaks onto a new line because the page isn't wide enough
for both the image and link). The fact that these elements are inline is not as obvious when you give the page a max-
imum width because there isn't enough room for the elements to sit beside each other.
Figure 9-5
Some of the inline-level elements prior to Chapter 5.
Later in this chapter, you use the
position
property to position the More Information button over the top of the
showcase image.
Some elements that display well as inline-level are the navigation links, which are currently
display: list-
item;.
Change that as follows:
1.
In styles.css, find the
#header nav > ul > li
rule set and add the following declaration:
display: inline;
2.
Save styles.css.
When you make each navigation list item inline-level, those links line up horizontally, as shown in Figure 9-6. This
arrangement makes better use of the horizontal space available.
