How to convert other types of elements into inline elements in css-Front-end Q&A-php.cn

In CSS, you can use the display attribute to convert element types and convert other types of elements into inline elements; you only need to set the "display:inline" style for block-level elements or inline block elements. Can. The display attribute is used to define the type of display box generated by the element when creating a layout. When the value of this attribute is "inline", the specified element will be displayed as an inline element type.

How to convert other types of elements into inline elements in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

HTML elements are divided into three types: block elements, inline elements, and inline block elements.

Among them:

Inline elements: side by side with other inline elements; width and height cannot be set, and the default width is the width of the text.
The elements are: span i a b strong em sub sup u label br font

     
  元素1元素1

Copy after login

How to convert other types of elements into inline elements in css

block level Element: occupies a row and cannot be juxtaposed with any other elements; it can accept width and height. If the width is not set, the width will default to 100% of the parent.
The elements are: div p h1-h6 hr ul ol li dl dd dt form

div元素1

div元素2

p元素

Copy after login

How to convert other types of elements into inline elements in css

Inline block elements: sit side by side with other inline elements; the element's height, width, line height, and top and bottom margins can all be set.
Elements include: img textarea input

Copy after login

How to convert other types of elements into inline elements in css

##css converts other types of elements into inline elements

In CSS, you can use the display attribute to convert element types.

The display attribute is used to define the type of display box generated by the element when creating a layout. For document types such as HTML, using display carelessly can be dangerous, as it may violate the display hierarchy already defined in HTML. For XML, since XML doesn't have this kind of hierarchy built in, all display is absolutely necessary.

block: This element will be displayed as a block-level element, with line breaks before and after this element.
inline: Default. This element will be displayed as an inline element with no line breaks before or after the element.
inline-block: Inline block element. (New value in CSS2.1)

Therefore, you only need to set the "

display:inline" style to block-level elements or inline block elements. It is converted to an inline element.

Example 1: Convert block-level elements to inline elements

     
  块级元素1
 块级元素2
 块级元素3

Copy after login

How to convert other types of elements into inline elements in css

Example 2: Convert inline block elements to inline elements

Copy after login

How to convert other types of elements into inline elements in css

(Learning video sharing:

web front-end)

The above is the detailed content of How to convert other types of elements into inline elements in css. For more information, please follow other related articles on the PHP Chinese website!