Rumah  >  Artikel  >  hujung hadapan web  >  css ul 不换行怎么实现

css ul 不换行怎么实现

藏色散人
藏色散人asal
2021-04-12 14:35:312937semak imbas

css ul不换行的实现方法:1、设置足够宽的宽度,然后将li的float属性设置为left;2、通过“white-space:nowrap;”处理块元素中的空白符和换行符。

css ul 不换行怎么实现

本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

如何让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时就是文本不会换行,文本会在在同一行上继续,直到遇到0c6dc11e160d3b678d68754cc175188a标签为止。但是用于非文本的元素也可以。

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

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

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

    至此就解决了ul横向排列不换行的问题了。看来熟悉各种属性的特点还是很有必要的。

【推荐学习:css视频教程

Atas ialah kandungan terperinci css ul 不换行怎么实现. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:css怎么去掉select箭头Artikel seterusnya:css border不显示怎么办