A detailed description of how List-style and inline are used in CSS

Previously only used to List-style:none; This way, the original thought also only this way, this way is just let Li before the mark is removed, the following for you to introduce the next Css:list-style and inline usage explained, interested friends do not miss the usual to write programs, write p or span or UL Li, etc., often encountered An inexplicable problem, their own solution may be top: -10px may also float:left, the problem can be solved, as if the ship to New York and fly to New York as a result, are to New York, but the way is different, in contrast, the aircraft faster and more convenient. Choose it yourself!

Display:inline; List-style:none outside none; White-space:nowrap

First look at the usage of List-style:

I used to use only list-style:none; This way, the original thought is only this way, this way is just to let Li before the mark is removed!

In fact List-style can be divided into three properties: List-style-type list-style-position list-style-image

See the word:

Definition and usage

The List-style shorthand property sets all the list properties in a declaration.

Description

This property is a shorthand property that covers all the other list style properties. Since it is applied to all display-list-item elements, it can be used only in normal HTML and XHTML in the LI element, but in fact it applies to any element and is inherited by the List-item element.

The following properties can be set sequentially:

List-style-type

List-style-position

List-style-image

You can not set one of these values, such as "list-style:circle inside;" is also allowed. Properties that are not set use their default values.

Disc outside noneyescss1object.style.liststyle= "decimal inside"

Example

Set the image as a list item tag in the list:

UL {list-style:square inside URL ('/i/arrow.gif ');}

Browser support

All browsers support the List-style property.

Note: The property value "Inherit" is not supported by any version of Internet Explorer (including IE8).

CSS List-style-type Properties

Definition and usage

The List-style-type property sets the type of the list item tag.
Discyescss1object.style.liststyletype= "Square" instance

To set a different list style:

ul.circle {list-style-type:circle;} ul.square {list-style-type:square;} Ol.upper-roman {List-style-type:upper-roman;} ol.lower-alpha {list-style-type:lower-alpha;}

Browser support

All browsers support the List-style-type property.

Note: Any version of Internet Explorer (including IE8) does not support attribute values "Decimal-leading-zero", "Lower-greek", "Lower-latin", "Upper-latin", " Armenian "," Georgian "or" inherit ".
Possible value CSS2: none is unmarked. Disc default. The marker is a solid circle. The circle marker is a hollow circle. Square markers are solid squares. The decimal token is a number. A numeric marker that begins with Decimal-leading-zero0. (01, 02, 03, etc...) ) Lower-roman Lowercase roman numerals (i, II, III, IV, V, etc.). ) Upper-roman uppercase Roman numerals (I, II, III, IV, V, etc.). ) Lower-alpha lowercase English alphabet The marker is Lower-alpha (A, B, C, D, E, etc.). Upper-alpha Capital Letters The marker is Upper-alpha (A, B, C, D, E, etc.). ) Lower-greek lowercase Greek letters (alpha, beta, gamma, etc.). ) Lower-latin lowercase Latin alphabet (A, B, C, D, E, etc.). ) Upper-latin uppercase Latin alphabet (A, B, C, D, E, etc.). Hebrew Traditional Hebrew Numbering method Armenian traditional Armenian numbering method Georgian the traditional Georgian numbering method (an, ban, gan, etc.). Cjk-ideographic Simple ideographic Numbers hiragana tags are: A, I, U, e, O, Ka, ki, etc. (Japanese Katakana) The katakana tag is: A, I, U, E, O, KA, KI, etc. (Japanese katakana) The Hiragana-iroha tag is: I, Ro, ha, ni, ho, he, to, etc. (Japanese katakana) The Katakana-iroha tag is: I, RO, HA, NI, HO, HE, to, etc. (Japanese Katakana) CSS2.1 Value: Disc | Circle | Square | decimal | Decimal-leading-zero | Lower-roman | Upper-roman | Lower-greek | Lower-latin | Upper-latin | Armenian | Georgian | none | Inherit

CSS list-style-position Properties

Definition and usage

The List-style-position property sets where to place the list item tag.
Description

This property is used to declare the position of the list label relative to the contents of the list item. The external (outside) flag is placed at a certain distance from the border of the list item, but the distance is undefined in the CSS. The internal (inside) flag is treated as if they were inserted in the line element that precedes the contents of the list item.
Outsideyescss1object.style.liststyleposition= "Inside" instance

Specify the location of the list item markers in the list:

UL {list-style-position:inside;}

Browser support

All browsers support the List-style-position property.

Note: The property value "Inherit" is not supported by any version of Internet Explorer (including IE8).
Possible values inside list item markers are placed within the text, and wrapping text is aligned according to the tag. Outside the default value. Keep the marker on the left side of the text. List item markers are placed outside the text, and wrapping text is not aligned with the tag. Inherit specifies that the value of the List-style-position property should be inherited from the parent element.

CSS List-style-image Properties

Definition and usage

The List-style-image property uses an image to replace the tag of the list item.
Description

This property specifies an image that is marked as an ordered or unordered list item. The placement of an image relative to the contents of a list item is usually controlled using the List-style-position property.

Note: Always specify a "List-style-type" attribute in case the image is not available.
noneyescss1object.style.liststyleimage= "url ('/images/blueball.gif ')" instance

Set the image to the item tag in the list:

UL {List-style-image:url ("/i/arrow.gif"); list-style-type:square;}

Browser support

All browsers support the List-style-image property.

Note: The property value "Inherit" is not supported by any version of Internet Explorer (including IE8).
The path to the possible value URL image. None defaults. No graphics are displayed. Inherit specifies that the value of the List-style-image property should be inherited from the parent element.

two. Description of the inline:

Display:block is the display of elements as block-level elements.

The block element is characterized by:
Always start on a new line;
Height, row height and top and bottom margin can be controlled;
The width defaults to 100% of its container unless a width is set
<p>, <p>,
Display:inline is to display elements as inline elements.

The features of the inline element are:
And the other elements are on one line;
Height, row height and top and bottom margin can not be changed;
Width is the width of the text or picture, and it cannot be changed.
<span>, <a>, <label>, <input>, , <strong> and <em> are examples of inline elements.

Inline and block can control the high row width of an element and need to switch to the following conditions:

Let an inline element start from the new line;
Keep The block elements and other elements on one line;
Controls the width of the inline element (especially useful for navigation bars);
Controls the height of the inline element;
You can set the background color of a block element to the same width as the text without having to set a width.

Display:inline-block objects are presented as inline objects, but the contents of the objects are presented as block objects. Adjacent inline objects are presented in the same line, allowing spaces.

Elements of the Inline-block feature:

Renders an object as an inline object, but the contents of the object are presented as block objects. Adjacent inline objects are presented in the same line, allowing spaces. (accurately, the elements that apply this attribute are rendered as inline objects, the surrounding elements remain on the same line, but you can set the properties of the width and height parcel elements)

Not all browsers support this property, currently supported browsers are: Opera, safari in IE the use of inline elements Display:inline-block,ie is not known, but using display: Inline-block in IE will trigger layout, so that inline elements have the Display:inline-block attribute of the table disease. From the above analysis, it is not difficult to understand why ie, the block element set Display:inline-block property can not achieve inline-block effect. At this point the block element is simply triggered by the display:inline-block layout, and it is the row layouts, so after the trigger, the block element is still the row layout, but not as the block elements in opera as an inline object.

how does the IE block element realize the Display:inline-block effect?

There are two ways of doing this:

1, first use the Display:inline-block property to trigger the block element, and then define the Display:inline, so that the block elements presented as inline objects (two display to be placed in two CSS declarations to have effect, this is a classic IE bug, If Display:inline-block is defined first, then the display is set back to inline or block,layout does not disappear). The code is as follows (...). Other attribute content omitted):

p {display:inline-block; ...} p {display:inline;}

2. Set the block element directly to inline object presentation (set property display:inline), then trigger the layout of the block element (e.g. zoom:1, etc.). The code is as follows:

p {display:inline; zoom:1;}

CSS White-space Properties

Definition and usage

The White-space property sets how to handle whitespace within an element.

This property declares how to handle whitespace in elements during layout creation. The values Pre-wrap and Pre-line are new in CSS 2.1.

Normalyescss1object.style.whitespace= "Pre" instance

Text in a specified paragraph does not wrap:

p {White-space:nowrap}

Browser support

All browsers support the White-space property.

Note: The property value "Inherit" is not supported by any version of Internet Explorer (including IE8).
A possible value of normal is default. The blank will be ignored by the browser. The pre blank is reserved by the browser. It behaves like a <pre> tag in HTML. The nowrap text does not wrap, and the text continues on the same line until the <br> tag is encountered. Pre-wrap preserves a sequence of whitespace characters, but wraps normally. Pre-line merges a sequence of whitespace characters, but preserves newline characters. Inherit specifies that the value of the White-space property should be inherited from the parent element.