解决ul的li横向排列换行的问题

https://www.cnblogs.com/sapho/p/5736491.html


1. 问题现象

 

    先看下面的html结构:

复制代码
<div>
    <ul>
        <li><img src='./img/1.jpg'></li>
        <li><img src='./img/2.jpg'></li>
        <li><img src='./img/3.jpg'></li>
        <li><img src='./img/4.jpg'></li>
    </ul>
</div>
复制代码

    外层div设定了固定宽度,css中ul的宽度未设置(因为li的个数不确定),当通过javascript动态设置ul的宽度后,会导致li换行。

2. 分析

 

      尝试将ul的宽度增大,问题消失,推测是计算的ul宽度不准确,经过思考推敲,原来是我为li设置了1px的borde,但是计算ul宽度时,没有考虑到border,将border宽度加进去,一切正常。
      ul的宽度 = (li的width + li的左右margin + border)*li的length

 

3. 总结

 

     已经遇到过几次了,一直没有找到原因,在网上曾搜索到两种解决方法:

     一种是:给ul添加 white-space:nowrap; 将li的 float:left; 改成 display:inline-block; 试了,chrome、ff、ie8以上不会换行,但是最后一个li内容不能显示完全,ie6,7则无任何作用。

     另外一种是:将li设置为 display:table-cell; 同时li的margin改成padding,但是这样的话,影响了本来的布局。

     所以,当你遇到ul的li有一个或几个换了行,请先确认下有没有为li设置了border,如果有,那么检查下ul的宽度是否已经考虑了border。如果li没有border,那么可以试试我说的上面那两种解决方法。


  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在CSS中,要让无序列表(ul)的各个子项(li横向排列,可以使用以下方法: 1. 将 ul 标签添加 display: flex; 的样式,使其成为弹性容器。 2. 将 ul 的子项 li 添加 flex 属性,设置为 1,使每个子项都有相同的宽度。 3. 将 ul 的子项 li 添加 margin-right 属性,用于控制每个子项之间的距离。 4. 可以采用 "伪元素+margin负值" 的方式去掉最后一个子项的 margin-right,确保不会因为最后一项的 margin 造成排列不正常。 5. 若 ulli 元素有 padding,可以通过对 ul 的 padding 和 li 的 box-sizing 属性进行调整,使子项横排布局更紧凑。 以上就是将 ul li 横向排列的几个关键步骤,需要根据实际需求灵活调整样式。 ### 回答2: 在CSS中,想要将ul li横向排列,需要使用display属性。通过改变display属性的值,可以实现不同的布局方式。 一、使用行内布局 将ul的display属性值设置为inline-block,li的display属性值也设置为inline-block,则li将会在同一行内水平排列。 代码示例: ul { display: inline-block; } li { display: inline-block; } 二、使用浮动布局 将li的float属性设置为left,则li会向左浮动,从而实现水平排列。 代码示例: li { float: left; } 如果使用浮动布局,需要清除浮动。可以在ul中添加一个空元素,给它设置clear属性为both,让ul的高度自适应。 代码示例: ul:after { content: ""; display: block; clear: both; } 三、使用flex布局 使用CSS3中的flex布局可以更方便地实现水平排列,只需要给ul添加display: flex属性即可。 代码示例: ul { display: flex; } li { flex: 1; /* 控制每个li的宽度相等 */ } 上述三种方式都可以实现横向排列的效果,具体采用何种方式,可根据实际情况选择。 ### 回答3: CSS中的ul li横向排列是Web开发中非常常见的布局方式之一,它可以用于创建水平的导航栏、标签页、图片墙等多种场景。 要实现ul li横向排列,我们需要使用CSS中的display属性。默认情况下,ulli元素都被设置为块级元素,即按照垂直方向排列。但是,我们可以通过调整display属性,将它们转换为行内元素或者浮动元素来实现横向排列。 具体来说,实现ul li横向排列的步骤如下: 1. 首先,我们可以为ul元素设置display为flex或者inline-block,来将其转换为行内块元素。 2. 然后,我们需要为li元素设置display为inline-block或者float为left/right,以便它们可以水平排列。 3. 最后,我们可以对ulli元素设置padding和margin等样式,以控制它们的间距和样式。 具体的代码示例如下: ``` ul { display: flex; /* 或者inline-block */ list-style: none; padding: 0; margin: 0; } ul li { display: inline-block; /* 或者float: left/right */ padding: 10px; margin-right: 10px; background-color: #ccc; } ``` 上面的代码将创建一个横向排列ul元素,其中每一个li元素都有10px的内边距和外边距,并且背景颜色为灰色。通过添加更多的CSS样式,我们可以进一步美化并调整它们的样式和位置,从而获得所需的布局效果。 总之,CSS中的ul li横向排列是一种非常有用的布局技巧,掌握它可以方便我们创建各种类型的水平布局组件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值