码农成长记——css ul li 中嵌套span

最新推荐文章于 2024-04-20 14:50:22 发布
最新推荐文章于 2024-04-20 14:50:22 发布
阅读量5.4k 收藏
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xueyue_zx/article/details/53587904
版权

今天为了实现标题的分隔

在ul li 中嵌套了一个span 用css 规定大小然后float:right;结果|跑到span标签的范围之外去了

最后解决的方法是单独使用一个li把|包起来

经验：并排的元素或者没的包含关系的元素 尽量不是去用父子关系的嵌套 采用兄弟关系的并列更容易实现功能

xueyue_zx
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ul li实现表格样式
07-11
使用ul li 标签实现的表格样式，可代替table标签，避免搜索引擎收录不了表格中的关键字
码农翻身.xmind
07-31
码农翻身，自己的xmind类型的读书笔记，大家如果需要可以自行下载。当前文件对应我博客中的读书笔记内容
关于ul下<li></li>内插入<span>内容</span>标签自动换行不在同一行问题
alicegreat的专栏
07-10 1万+
前提，li span {float:right;} 如果这么写 美纤网2013.05.23 这个日期就会窜到下一行去 而如果这样 2013.05.23美纤网 日期和文字就会同行显示 问题出来了， 第一：这是为啥呢？ 第二：如何给span定义属性让他能够在第一种html写法下不换行? 当初来看,比较诡异的现象 仔细分析一下,原来是这样 Span本身虽然是内联元素,但加上浮动后
html：ul 列表嵌套和定义列表
最新发布
m0_74457957的博客
04-20 409
这里写对这个术语的描述1</dd><dd>这里写对这个术语的描述2这里写术语
li里面含有span浮动元素 间距
aaaa862008051的博客
12-04 353
*当li里面含有span浮动（浮动是为了对齐），在IE7下li之间会产生间距。 解决方案： li加上这个样式：vertical-align: bottom; 转载于:https://www.cnblogs.com/sgy2008/archive/2009/12/04/1617268.html...
li中包含span，在IE6、IE7下会有3pxbug
weixin_30696427的博客
08-15 51
如果给每个li里面加个span标签的话，在IE6，IE7下看，li与li之间的距离就会多了3px。 解决方法：在li中加vertical-align:middle; <div class="contain"> <div class="main"> <ul> <li>...
用div,ul,li,span代替table设计表格
老头学编程的博客
12-30 3475
传统的表格一般都是用table标签设计的，现在网页设计很少用table了，主要用div,ul,li,span等标签，这是一种网页设计的思想了，和table不一样。用这种方式设计的html代码结构清晰，很容易输出后台的数据或调用程序的标签语言(碎片功能)。 <div class="head"> <ul> <li>服务器名</li> <li>服务器IP</li> <li>开区时间</li> <li>开区线
简洁自适应个人码农主页源码_简洁自适应个人码农主页源码_
10-04
【简洁自适应个人码农主页源码】是一个专为个人码农设计的静态网页源代码，旨在提供一个简单、响应式且高效的展示平台。这款源码的特点在于其纯HTML结构，这意味着它不依赖JavaScript或其他复杂的客户端脚本语言，...
UL认证UL2808标准
06-16
UL认证UL2808标准
UL认证61010-1标准
06-16
UL认证61010-1标准
ul打造表格样式
03-19
NULL 博文链接：https://leon1509.iteye.com/blog/733025
li中的span右浮动问题
menghuannvxia的专栏
04-29 3586
新闻列表中为了显示时间，加了个span {NS:FS_NewsTitle}{NS:FS_AddTime} 结果这个 span竟然跑到下面去了 经过一天时间无数次的上网查资料、修改、测试 问题还是没有解决 而且遇到了更灵异的事，给前面超链接加左 浮动，在ie下文字竟然跑到列表符号前面去了 无语 分析：ie下列表符号应该没有包含在li内 span本来不换行，加浮动后成了块 元素，顶部不
li标签与span标签折行问题
暗夜之城
05-20 1409
li 列表项与span搭配使用，IE兼容问题； 问题：li标签里使用span，设置float属性，希望时间在标题后显示，在同一行； 非IE内核下显示正常，IE内核显示错位；            标题   ${a.releaseDate?string('yyyy-MM-dd')} 解决：将span放到标题的前面，可以解决。
快速上手、超实用的一些HTML标签……
qq_56966124的博客
04-16 1111
HTML常用的一些标签： div、span、ul、li、a、img、p 关于我的第一篇技术文章，我考虑了很久，不知道到底呈现什么给你们看比较好，最终我还是觉得从基础开始吧——HTML，上面提到的只是HTML标签中的一部分，但是使用这些已经足够完成很多构架了，毕竟说白了，标签就是一个盒子而已，只不过不同的标签代表不同寓意的盒子，但它们的本质都是盒子，用来存放内容的一个容器。 HTML（超文本标记语言），它用来搭建整个网页的结构，它相当于是一个容器，我们把内容放在标签里面...
如何让ul li 里的 span 垂直居中
前端开发、简约至上！ - Html，Css，Js，Jquery ...
03-07 2219
方法如下：   ul li img{ width:90px; height:60px;display: inline-block; vertical-align: middle; margin-right:10px;}   ul li span{display: inline-block; vertical-align: middle;}
CSS 实现多行span文字在div，li中居中问题
qq_32524473的博客
07-08 2876
实现效果：效果解析：&lt;ul&gt; &lt;li class="menu-item"&gt; &lt;span class="text"&gt; 热销榜 &lt;/span&gt; &lt;/li&gt; &lt;/ul&gt;.menu-item display tabl
三种方式实现网页二级菜单
热门推荐
Bazingaea的博客
11-28 6万+
方法一：使用HTML和CSS实现   首先是Html代码，习惯上会将菜单放在一个div里，使用盒子模型，方便以后的操作和设置样式。 二级菜单也就是在一级菜单中的li中再添加一个ul-li结构   &lt;div class="test"&gt; &lt;ul&gt; &lt;li&gt;A&lt;/li&gt; &lt;li&gt;B&lt..
算法题：数组去重，去除重复两次以上的元素，代码题：嵌套的ul-li结构，根据input中输入的内容，去除相应的li节点，且如果某个嵌套的ul下面的li都被移除，则该ul的父li节点也要被移除
05-28
1. 数组去重： ```python def remove_duplicates(arr): counts = {} for i in arr: if i in counts: counts[i] += 1 else: counts[i] = 1 return [key for key, value in counts.items() if value == 1 or value == 2] ``` 2. 嵌套的ul-li结构： ```html <ul id="parent"> <li>Item 1</li> <li>Item 2 <ul> <li>Sub-item 2.1</li> <li>Sub-item 2.2</li> </ul> </li> <li>Item 3 <ul> <li>Sub-item 3.1</li> <li>Sub-item 3.2</li> </ul> </li> </ul> ``` ```javascript const input = "Sub-item 2.2"; // 要移除的节点内容 function removeLi(input) { const lis = document.getElementsByTagName("li"); for (let i = 0; i < lis.length; i++) { const li = lis[i]; if (li.textContent === input) { li.parentNode.removeChild(li); removeUl(li.parentNode); i--; } } } function removeUl(ul) { if (!ul.parentNode) { return; } const lis = ul.getElementsByTagName("li"); if (lis.length === 0) { ul.parentNode.removeChild(ul); removeUl(ul.parentNode); } } removeLi(input); ``` 以上代码为示例代码，可以根据实际情况进行修改。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值