ul设置列表为一行2条

最新推荐文章于 2023-12-11 10:03:15 发布
原创 最新推荐文章于 2023-12-11 10:03:15 发布 · 1.7k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

float:left + 设置ul的宽度 + 设置li的宽度
1.其实设置ul的列表本来是一行一行的，当设置li的float为left的时候可以看见成为一行
2.比如ul的宽度为200px,为了实现一行2条，我们可以设置li的宽度为75px,由于float为left,二一行又只能放置2个li，所以第三个就被挤下去了。


如有不明白可以看360buy_nav文件夹将鼠标移到企业建站时可以看到效果
ul和li实现分两列（多列）布局显示
hffygc的博客
11-09 2012
ul和li实现分两列（多列）布局显示
H5+CSS3之如何简单的实现自适应一排两列布局
zhangsanwuyu的博客
05-18 9435
先上效果图：再来代码：<body> <section> <ul class="box"> <li></li> <li></li> <li></li> <li></li&
ul li一行两个显示
weixin_34138056的博客
03-16 3296
ul li 两个放在一行 使用display:inline
hyq_07_27的博客
07-06 3221
页面如图： 原来美工写的是： <div class="article"> <ul> <li><img src="img/dot_unclick.png" alt=""><a>需求方案编制规范——建设类项目（试行）5.1建设类项目（试行）5.15.1……</a> </li>
JS：让2个li标签排列在同一行
无面人的博客
12-11 1068
在js中，让2个分行的li元素显示在同一行，并且去掉li元素自带的标记符号
CSS实现ul和li横向排列的两种方法
11-21
因为li是块级元素，默认占一行的，要想实现横向排列，一般通过以下两个方法： float:left 这样设置有一个问题，li浮动以后则脱离了文本流，即不占位置，如果它的父级元素有具体的样式且没有固定宽高，建议父元素清除浮动，或者设置固定宽高 display:inline-block 即把li变为行内元素且可以设置宽高以及边距，这样也有一个问题，低版本的Ie浏览器不兼容inline-block，建议在其后再加两个属性兼容低版本ie *display:inline; *zoom:1; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
将 ul+li 分两列显示的方法
科比不来it
04-18 9012
目的很简单：有一个 ul>li 列表，默认为单列显示，把它变为两列显示。 方法1，使用DIV+CSS代码： .mycode{ width:300px; height:74px; float:left;} .mycode ul{ width:280px;} .mycode li{ width:100px; float:left; display:block;} ABC ABC ABC ABC
CSS如何让li 4个一行显示
qq_55625776的博客
02-28 1412
我们在做前端开发的时候，或者仿站的时候，有时候很容易遇到产品列表页显示错位的情况，比如原来4个一行显示，结果却变成了3各一行显示，很难看。原来是你的CSS没有控制好。 有网友问：css 如何控制ul li 每行显示几个并换行 像table效果一样。 今天春哥就给大家讲讲：大家看一下下面的代码，有什么发现： .column .col-4-1 { width: 22.75%; margin-right: 3%; } .column .col-4-1 { width: 22%;
前端案例-css实现ul中对li进行换行
qq_43720551的博客
11-13 4216
我想要实现，在展示的item个数少于4个的时候，则排成一行，并且均分（比如说有3个，则每个的宽度为33.3%），如果item 个数大于4，则进行换行
2021-08-05
l13731380061的博客
08-05 259
列表标签：分为无序列表和有序列表 无序列表的各个列表项之间没有顺序级别之分，是并列的。 <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ...... </ul> 注意： 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标...
css ul两列显示
05-13 2568
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> #hotNeeds ul{float:left;} 热门需求排行
常用CSS样式处理（一）
易大师不易
01-24 499
1.ul标签控制每行显示几个li： ul没有属性设置li的个数，但是可以通过设置宽度来控制： 如：           元素1            元素2              元素3              元素4         那么如果想让每行显示2个li内容可以这样：      ul{        width:100%        }   
HTML多个li的快捷命令,html中 让 ul 的多个 li 在一行内显示
weixin_42161497的博客
06-07 5557
有时候会需要ul的li都在同一行显示，避免li跑到下一行去，今天遇到了这个问题，记录下来，避免忘记~Document*{padding: 0;margin-bottom:0;border: 0;}.box{width: 640px;height: 50px;overflow-x: scroll;overflow-y: hidden;}ul{display:inline;white-space: n...
html5用ul li调成上下左右两行两列
zhang135687的博客
03-21 7870
建两个ul，定两个class名，分别写不同的float，一个向左浮动一个不浮动，就ok了！！！小白的开端~~
ul li设置排列为行
最新发布
03-26
### CSS 实现 `ul` 和 `li` 元素水平排列的方法 要实现 `ul` 和 `li` 的水平排列，可以通过多种 CSS 属性组合完成。以下是几种常见的方法及其具体实现： #### 方法一：使用 `display: inline-block` 这是最常用的一种方式，通过将 `li` 设置为 `inline-block` 来使其在同一行显示。 ```css nav ul { list-style: none; padding: 0; /* 去除默认的padding */ margin: 0; /* 去除默认的margin */ } nav li { display: inline-block; /* 让li元素变为行内块级元素 */ width: 200px; /* 可选属性，定义宽度 */ background-color: red; /* 背景颜色示例 */ } ``` 这种方法简单直观，并且兼容性较好[^1]。 --- #### 方法二：使用 `float` 浮动布局 另一种常见的方式是利用 `float` 属性让 `li` 元素浮动起来，从而达到水平排列的目的。 ```css nav ul { list-style: none; padding: 0; margin: 0; overflow: hidden; /* 清除浮动带来的影响 */ } nav li { float: left; /* 将li向左浮动 */ width: 200px; /* 定义宽度 */ background-color: red;/* 背景色 */ } ``` 需要注意的是，在父容器上添加 `overflow: hidden` 或其他清除浮动的技术，以防止因子元素浮动而导致父容器高度塌陷的问题[^5]。 --- #### 方法三：使用 `flexbox` 弹性盒子模型 现代浏览器支持更强大的弹性盒布局 (`Flexbox`)，这种方式更加灵活和强大。 ```css nav ul { list-style: none; padding: 0; margin: 0; display: flex; /* 使用flex布局 */ } nav li { width: 200px; /* 定义宽度 */ background-color: red;/* 背景色 */ } ``` 此方法不仅可以让 `li` 水平排列，还可以轻松调整间距、对齐方式等更多高级功能[^4]。 --- #### 方法四：使用 `white-space: nowrap` 配合 `display: inline-block` 如果希望避免浮动或者复杂的 Flexbox 结构，也可以尝试以下方案： ```css nav ul { list-style: none; padding: 0; margin: 0; white-space: nowrap; /* 不允许换行 */ overflow: hidden; /* 处理超出部分 */ } nav li { display: inline-block; /* 行内块状显示 */ vertical-align: top; /* 对齐顶部 */ width: 200px; /* 宽度 */ background-color: red; /* 背景色 */ } ``` 这种技术的核心在于 `white-space: nowrap`，它可以阻止内容自动换行，而 `inline-block` 则负责保持每个项目之间的独立性[^3]。 --- ### 总结 以上四种方法都可以有效实现 `ul` 和 `li` 的水平排列。推荐优先考虑 **Flexbox** 方案，因为它具有更好的可维护性和扩展性；而对于老旧环境，则可以选择基于 `inline-block` 或 `float` 的传统解决方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值