在css中,可以利用display属性消除标签单独占一行的样式,当该属性的值为“inline”时会设置标签显示为内联元素,此时标签前后没有换行符,也就不会独占一行;具体语法为“标签元素对象{display:inline;}”。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
css怎样消除标签单独占一行的样式
标签之所以会单独占一行,是因为有些标签是块级元素,块级元素占据其父元素(容器)的整个水平空间,垂直空间等于其内容高度,因此创建了一个“块”。想要消除标签独占一行,只需要将标签设置为内联元素,去掉元素前后的换行符。
这时候就需要用到display属性,只需要将标签的display属性值设置为inline,就表示此元素会被显示为内联元素,元素前后没有换行符。就能够消除标签独占一行的效果了。
立即学习“前端免费学习笔记(深入)”;
示例如下:
Document 测试标签
测试文字
输出结果:

给标签添加样式之后:
Document .h{ display:inline; }测试标签
测试文字
输出结果:

(学习视频分享:css视频教程)
以上就是css怎样消除标签单独占一行的样式的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1622317.html
微信扫一扫
支付宝扫一扫