css怎么设置p标签不换行


当前第2页 返回上一页

1.png

如果我们想要让p标签不换行,让两个p标签在同一行该如何设置呢?

设置p标签不换行

css可以通过为p标签设置“display:inline;”或“display:inline-block;”样式使p标签不换行。

示例:

3.png

效果图:

4.png

display:inline;

display 属性规定元素应该生成的框的类型。

这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。

属性值:

  • block 此元素将显示为块级元素,此元素前后会带有换行符。

  • inline 默认。此元素会被显示为内联元素,元素前后没有换行符。

  • inline-block 行内块元素,元素前后没有换行符。(CSS2.1 新增的值)

内联元素的特征:

  • 设置宽高无效

  • 对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间

  • 不会自动进行换行

行内块元素的特征:

  • 不自动换行

  • 能够识别宽高

  • 默认排列方式为从左到右

更多编程相关知识,请访问:编程视频!!

以上就是css怎么设置p标签不换行的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

css中font-family是什么意思

css里的display属性有啥作用

css如何添加下划线

css如何禁止滚动条

css怎么让字体变大

css中怎么进行注释

css书写顺序需要注意哪些?

css p标签怎么设置不换行

css怎么给图片加上下边框

css中一个冒号和两个冒号分别代表什么?

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...