| |
| |
| List-Style-Position |
| |
With CSS it is possible to determine how the list-item marker will be placed in relation to the content of the list-item.
- It can have the values: outside or inside.
- Outside- This is the default value. This marker is placed outside the text. Wrapping text is not indented under the marker. Only the first line is indented. Subsequent lines are not aligned under the marker.
- Inside - This marker is placed inside the text. The text lines up with the marker on the left margin. It makes the second and subsequent lines of a list item left-indented with the marker.
|
| |
| Example for Outside Marker |
ul{ list-style-position : inside;}
Select your flavor:
- vanilla
- strawberry
- black currant
- chocolate
|
| Example for Inside Positon |
ol {list-style-position: outside;}
Select your subject :
- java
- c/c++
- .net
- unix
|
| |
| |
| Summary |
| |
In this chapter you have learnt:
- How lists are used for organizing data
- Various list style options available
- Different list styles and their corresponding values
- Employing images in lists, in place of the normal bullets
- Positioning the list-item marker
|
| |
| Review Questions |
| |
Fill in the Blanks
- Lists are used to organize data in a _____ manner.
- Types of lists are ______ and _____.
- Square, circle, disc, and none are the values of _____ list-type.
- Values for list-style-image are _____ and _____.
Solutions
- Linear
- Unordered list, ordered list
- Unordered
- None, URL
State whether True or False
- If an ordered-list-type has value as lower-alpha, then it can start the list from 'd' alphabet also.
- The default list-item-type has value none.
- List-style-position determines how the list-item-marker will be placed in relation to the marker of the list.
- The default list-style position value is inside.
Solutions
- True
- False
- False
- False
| Exercise |
| Create a list showing all the list styles. |
| Solution |
|
| |
|
| |
| What's Next |
The next chapter will introduce the concepts of setting dimension around objects. The chapter will also discuss setting the height, and width of various HTML elements.
Hop over to the next chapter to get a close-up on dimension properties. |
|