HTML and CSS Reference
In-Depth Information
#tablinks ul,#tablinks li {
Figure 12-3 demonstrates the effect of removing padding and margins. Remember, the borders
in this image are for demonstration purposes only so that you can see the effect of removing
the margins and padding. If you were to copy the CSS exactly , the borders would not display as
they do in Figure 12-3.
Figure 12-3. The list with all padding and margin attributes reset
Flattening the List
Just as it's possible to set a series of div s out so they line up side by side, you can do the same
with list items. You have a couple of options, each with its own pros and cons:
Set the li elements to display:inline . By doing this, you convert the block-level list
item to an inline one and thus lose the ability to style it in certain ways, such as setting
heights, vertical padding, and so on. You can still specify right and left padding, but this
may not be enough to achieve the design you want. That said, you avoid a problem
that's associated with the other method: floating each li element.
Float each li element with float:left . This keeps the list item as a block-level element,
giving you greater control over styling with CSS, but at the same time it causes another
issue to rear its not-so-attractive head once more: you have to deal with the sometimes
tricky task of containing floats.
As you've already learned about the various ways of managing floats (check out “Manag-
ing Floats” in Chapter 7), it's safer to use the second method and retain the styling capabilities
that block-level elements can offer.
Note When you float a block-level element, it will only take up as much space horizontally as it needs.
Unlike the list items shown in the previous images in this chapter, a floated list item won't stretch across the
page and take up 100 percent of the container element.
Here's some amended CSS and XHTML to flatten our list. The clearfix class applied to
the containing div ensures that we don't run into problems with the floated elements.
Search WWH ::

Custom Search