使li标签横向排列的三种方式

最新推荐文章于 2024-05-09 10:12:04 发布
最新推荐文章于 2024-05-09 10:12:04 发布
阅读量2.3w 收藏 49
点赞数 12
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61685348/article/details/120694044
版权

一、display:inline 

通过把li转换为行内元素实现，行内元素不独占一行，根据内容撑开大小

 

 

 

 

 二、float：left

通过让li浮动实现横向排列 ，浮动会使li脱离文本流，且不占位置

 

 三。通过flex布局实现

首先给父级定义flex，li{ flex:1}的意思为独占父级宽度的n分之1，这里的n取决于li的个数，也就是4分之1

 

 

晚安#
关注
  • 12
    点赞
  • 踩
  • 49
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
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
CSS的ul和li实现横向排列和去掉li的点
09-25
怎么实现ul的横向排列和去掉li那个烦人的点，现在找到方法了，在此与大家分享下，感兴趣的朋友可以参考下，以备不时之需
在ul中使li水平布局的两种方法
09-25
li水平布局在实际中使用的比较广泛，实现方法也有很多，下面为大家介绍下比较实现的几种方法，有此需求的朋友可以参考下，希望对大家有所帮助
li标签的横向排列
热门推荐
Wendy
10-19 7万+
       li标签的使用很广泛，在各种选项卡的制作，导航栏等都用到，那么li标签的横向排列也是经常用到。&lt;ul&gt;标签下的项目&lt;li&gt;默认是纵向排列的，我们需要定义额外的CSS属性让其横向排列，li标签的横向排列有两种实现方法，现总结如下：1、使用float:left      在这里顺便解释几个css样式的使用。       1）list-style:none,这个属性...
【CSS】＜li＞水平排列且居中显示
weixin_53079458的博客
11-24 1705
三种方法实现水平排列且居中显示
HTMl：标签li如何横向排列
yunduanaoligei的博客
10-22 6295
今天分享下”HTMl：标签li如何横向排列“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 大部分的导航栏全是横向排列如下图所示，那麼这到底是怎么完成的呢？实际上它主要是应用标识中li的横向排列，下边以一个事例向我们具体解读实际是怎样完成的。 1编写横向菜单的HTML代码架构 ​​<​​​​ul​​ ​​id​​​​=​​​​"menu"​​​​>​​ ​​<​​​​li​​​​><​
怎么让HTML的属性横着排,css标签怎么设置横向排列
weixin_29159441的博客
06-04 1万+
css是一款功能强大的网页辅助工具，在软件使用中，浮动属性设置li标签的样式，便可以实现横向排列。下面小编就教大家css标签怎么设置横向排列，有需要的小伙伴不要错过！css标签怎么设置横向排列1、新建一个html文件，命名为test.html，用于讲解css中如何让li标签实现横向排列。2、在test.html文件中，使用ul标签创建一个列表，用于测试。3、在test.html文件中，给ul标签添...
用ul li做横向导航
weixin_30363981的博客
10-16 404
样式--------------------------------- /* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */div.menu ul{ list-style:none; /* 去掉ul前面的符号 */ margin: 0px; /* 与外界元素的距离为0 */ padding: 0px; /* 与内部元素的距离为0 */...
图文详解如何让ul中的li元素横向排列（附代码）
lin123_00的博客
05-11 3万+
在页面布局时，我们经常会用到li标签，因为li标签用途很广泛，它可以用来制作列表，选项卡，导航等等。但是<ul>标签里的li默认情况下是纵向排列的，那我们可不可以让li横向排列呢？这篇文章就给大家介绍两种方法，来实现HTML中ul列表横向排列。有需要的朋友可以参考一下，希望对你有用。 打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新） ul列表的横向排列在导航中用得比较多，接下来就通过横向导航实例来讲讲如何用CSS让ul横向排列。 注意： 1、li
如何让li横排显示
剑阁青枫
12-06 2926
这样： li{dispaly:inline} 或者这样也可： li{dispaly:inline-block} 都可以达到效果。inline-block简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特
用ul、li标签创建css横向导航菜单示例
01-19
现在我们正常的做法是应用ul、li标签把链接作为无序列表（unordered list）来标识。再应用CSS样式对其进行控制，按我们预想的形式在容器中显示出来。对导航条使用无序列表似乎是不符合直观感受的，因为我们习惯于把...
JavaScript使用ul中li标签实现删除效果
12-10
本文实例为大家分享了js使用ul中li标签实现删除效果的具体代码，供大家参考，具体内容如下 <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"&...
li横向排列的方法
I AM COMING BACK...
07-23 165
添加样式 li {float: left;}
csc实例：用UL制作横向CSS导航菜单
twosecond
12-26 5519
前互联网站前端页面的大趋势是采用DIV+CSS构架，因为它不仅能更受搜索引擎青睐，而且一个良好结构的DIV架构网站可以从一定程度上提高页面的展示速度。在本教程中，我们将通过实例来给大家介绍：如何使用(X)HTML中的标签来制作一个简单横向导航菜单。为什么要用标签来制作导航栏和菜单栏？用UL做导航菜单之所以被广泛采用，主要是因为它的代码清晰，布局方便，更重要的是具有“语义”效果，能够方便进一
如何让li中的标签内容横向排列
小草的博客
08-14 6731
1.li标签默认是按纵向排列的 解决方式：   效果图： 2.thymeleaf下设置onclick属性 th:onclick="'javascript:openBox(\''+${curCabNo}+'\',\''+${box.no}+'\')'"
html ul li纵向排列,CSS实现ul和li横向排列的两种方法
weixin_36339234的博客
05-30 6273
因为li是块级元素，默认占一行的，要想实现横向排列，一般通过以下两个方法：float:left这样设置有一个问题，li浮动以后则脱离了文本流，即不占位置，如果它的父级元素有具体的样式且没有固定宽高，建议父元素清除浮动，或者设置固定宽高display:inline-block即把li变为行内元素且可以设置宽高以及边距，这样也有一个问题，低版本的Ie浏览器不兼容inline-block，建议在其后再加...
html5图片的纵向排列,html 中的 标签横向排列的方法
weixin_34846784的博客
05-30 1万+
html页面中的多个连续的标签在默认的情况下是竖向排列的，不过我们可以设置 li 标签的 CSS 样式，来使一个 ul 标签中的所有 li 标签都横向排列。多个 html 中 li 标签默认竖向排列html代码html>#pic_listli{width:40px;height:40px;margin:3px;background:red;list-style:none;}运行结果：通过...
将前端json字符串转换成htmlGET字符串
最新发布
xujinwei_gingko的专栏
05-09 361
var obj = {"common":{"bid":"","keyId":"","assetType":"PMETAL","assetCode":"iAu100g","status":"01","shortName":"iAu100g","longName":"iAu100g","tfStructure":"N","tfDel":"N","tfReal":"Y","operateTime":"","operateDate":"","dataType":"01","tfTradable":"Y","natu
htmlli标签横向排列
06-01
你可以使用 CSS 中的 `display: inline-block` 属性来使 HTML 元素横向排列。你可以把需要排列的元素用一个容器元素包含起来，然后给这个容器元素设置 `display: inline-block` 属性，这样容器元素及其内部的子元素就会横向排列了。以下是一个示例代码： HTML 代码： ``` <div class="container"> <div>元素1</div> <div>元素2</div> <div>元素3</div> </div> ``` CSS 代码： ``` .container { display: inline-block; } .container > div { display: inline-block; margin-right: 10px; /* 设置元素之间的间距 */ } ``` 注意，这里的 `div` 元素只是示例，你可以根据实际需要替换成其他 HTML 元素。另外，需要注意的是，如果你的容器元素和子元素的宽度之和超出了容器元素的宽度，那么会导致元素换行，因此需要注意元素宽度的设置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值