div/span强制不换行

来源:互联网 发布:淘宝怎么看是不是假货 编辑:程序博客网 时间:2024/05/21 19:42

div/span强制不换行

首先看一下效果:


接下来看下代码:不需要引入任何文件。

<html><head><meta  content="text/html; charset=utf-8" /><title>div/span强制不换行</title><style>.main1{display:inline-block;width:500px;height:100px;border:1px solid #000;}.main2{display:inline-block;width:500px;height:100px;border:1px solid red;}.main3{display:inline-block;width:500px;height:100px;border:1px solid #000;}.main4{display:inline-block;width:500px;height:100px;border:1px solid red;}</style></head><body>      <span class="main1"></span>      <span class="main2"></span>        <div class="main3"></div>      <div class="main4"></div>   </body></html>

重点是元素的样式里面写上 display:inline-block;  就ok了。
原创粉丝点击