CSS基础(十三)-- Display样式之块级标签变行内标签样式显示display:inline

时间:2019-09-04
本文章向大家介绍CSS基础(十三)-- Display样式之块级标签变行内标签样式显示display:inline,主要包括CSS基础(十三)-- Display样式之块级标签变行内标签样式显示display:inline使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。


随笔记录方便自己和同路人查阅,学习CSS时最好先学会HTML。

#------------------------------------------------我是可耻的分割线-------------------------------------------

Div块级标签,普通展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
</head>
<body>
    <div style="background-color:red; >asdf</div>

</body>
</html>

效果:

块级默认占一行,使用display:inline"把块级标签变为行内标签显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
</head>
<body>
    <div style="background-color:red; display:inline">asdf</div>

</body>
</html>

效果:

根据结果可以看出增加了display:inline;后,div显示结果变为了行内标签默认样式

原文地址:https://www.cnblogs.com/lirongyang/p/11303496.html