css span 和div同一行

CSS中的span

div
都是常用的标签,但是它们的使用有所不同。
    <div>
        这是一个div标签。
    </div>
    <span>
        这是一个span标签。
    </span>

css span 和div同一行

span标签一般用于文本中的小块级元素,比如单个字符或是一组单词,可以对span标签进行样式设置,比如颜色、字体等。

div
标签则常用于页面布局中,它是一个块级元素,可以设置宽度、高度、边框等样式,也可以设置居中、左浮动、右浮动等方便的布局效果

如果想要把span

div
放在同一行,并且依次排列,可以使用display: inline;或者display: inline-block;来设置这两个标签的样式。
    <div style="display: inline-block;">
        这是一个div标签。
    </div>
    <span style="display: inline;">
        这是一个span标签。
    </span>

在上面的代码中,

div
标签使用了display: inline-block;样式,span标签使用了display: inline;样式,这样就可以让它们在同一行显示了。

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效