CSS display display

CSS display display

Element and the block elements 1. Relationship between line

Block-level elements: 1, the title tag: h1 ~ h6; 2, paragraph tag: p1 ~ p6; 3, div; 4, listing; et

Inline elements: 1, span; 2, a; 3, img; 4, strong; and the like

Relationship between the two:

Inline element may be included in the block element;

Block-level element not contained within the line elements;

Thus, resulting in a problem: when trying to block-level elements in a row, there will be problems. Therefore, there have been solutions: display

2. The block-level elements in a row

CSS syntax: Label Name {display: inline;}

For example: a list of block element, which is on a line

HTML code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>

<p>链接列表水平显示:</p>

<ul>
   <li><a href="https://www.baidu.com/" target="_blank">HTML</a></li>
   <li><a href="https://www.baidu.com/" target="_blank">CSS</a></li>
   <li><a href="https://www.baidu.com/" target="_blank">JavaScript</a></li>
   <li><a href="https://www.baidu.com/" target="_blank">XML</a></li>
</ul>

</body>
</html>

CSS code is as follows:

li {
   display: inline;
}

effect:

 

 

 

 

Guess you like

Origin www.cnblogs.com/WZ-BeiHang/p/12355289.html