怎么让ul实现横向排列不换行的效果

这篇文章主要为大家展示了“怎么让ul实现横向排列不换行的效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“怎么让ul实现横向排列不换行的效果”这篇文章吧。

成都创新互联专注于岭东企业网站建设,响应式网站开发,购物商城网站建设。岭东网站建设公司,为岭东等地区提供建站服务。全流程定制制作,专业设计,全程项目跟踪,成都创新互联专业和态度为您提供的服务

    方案一:

    设置足够宽的宽度,然后将li的float属性设置为left。意思就是使li元素向左浮动排列。代码如下:

    ul{

    width:2000px;//设置足够的宽度

    overflow:hidden;

    white-space:nowrap;//处理块元素中的空白符和换行符的,这个属性保证图片不换行

    }

    li{

    list-style:none;

    float:left;//向左排列

    margin-left:15px;

    width:130px;

    }

    方案二:

    ul{

    display:block;

    overflow:hidden;

    white-space:nowrap;//处理块元素中的空白符和换行符的,这个属性保证图片不换行

    }

    li{

    list-style:none;

    display:inline-block;//使li对象显示为一行

    margin-left:15px;

    width:130px;

    }

    在上面我们可以看到两种解决方法都用到了white-space属性,如果没有这个属性就无法完成不换行的效果。通过css手册可以看出这个属性是:如何处理元素内的空白。当选择nowrap时就是文本不会换行,文本会在在同一行上继续,直到遇到
标签为止。但是用于非文本的元素也可以。

    还有就是display属性。在方案二中如果不设置为inline-block,也无法完成不换行的效果。

    inline-block:将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。

    inline-block的特点:将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。(准确地说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性)。

以上是“怎么让ul实现横向排列不换行的效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网站标题:怎么让ul实现横向排列不换行的效果
本文链接:http://pwwzsj.com/article/ppjpph.html