修复上一个li和滚动在ulfirefox问题-fixlastliandscrollatulfirefoxissue

作者：平凡2188 | 来源：互联网 | 2023-05-18 12:33

ItsworkingperfectinCromebutinfirefoxsecond-lastlistitemcountryname8isnotvisible,y

Its working perfect in Crome but in firefox second-last list item 'country name 8' is not visible, you can see it through firebug.

它在Crome中工作得很好，但是在firefox的最后一个列表项“国家名称8”不可见，您可以通过firebug查看它。

conditions:-

条件:-

Cant use div or another tag for last list item it has to be in li.
不能使用div或另一个标签为最后的列表项它必须是在li。
It has to display inside the scroll not outside.
它必须显示在滚动条里面而不是在外面。

only two conditions. if its possible through jquery we can do that, Thanks in advance :)

只有两个条件。如果可能的话，我们可以通过jquery来实现，提前感谢:)

.searchlist{
	position: relative;
  margin-top:50px;
}
ul{  display: block;
    max-height: 110px;
    overflow-y: auto;
    padding:0px 0px 38px 0px;
	margin:0px;
	width: 223px;
	}
li{padding: 8px 10px;
display: block;
font-size: 13px;
cursor: pointer;
background: #35404d;
}
li.fix{border-top: 1px solid #50575f;
    position: absolute;
    top: 115px;
    width: 185px;}


	
		country name 1 
		country name 2 
		country name 3 
		country name 4 
		country name 5 
		country name 6 
		country name 7 
		country name 8 
		country name 9

1 个解决方案

#1

You an remove the padding for ul and target the second last li and add the bottom margin to it.

您可以移除ul的衬垫，将第二个li作为目标，并添加底部空白。

You can use :nth-last-child(2). Browser compatibility

您可以使用:nth-last-child(2)。浏览器兼容性

li:nth-last-child(2) {
  margin-bottom: 34px;
}

Demo

演示

.searchlist {
  position: relative;
  margin-top: 50px;
}
ul {
  display: block;
  max-height: 110px;
  overflow-y: auto;
  margin: 0px;
  width: 223px;
}
li {
  padding: 8px 10px;
  display: block;
  font-size: 13px;
  cursor: pointer;
  background: #35404d;
}
li:nth-last-child(2) {
  margin-bottom: 34px;
}
li.fix {
  border-top: 1px solid #50575f;
  position: absolute;
  top: 69%;
  width: 185px;
}


  
    country name 1
    country name 2
    country name 3
    country name 4
    country name 5
    country name 6
    country name 7
    country name 8
    country name 9

推荐阅读

int
深入解析 Android 中 EditText 的 getLayoutParams 方法及其代码应用实例

深入解析 Android 中 EditText 的 getLayoutParams 方法及其代码应用实例 ... [详细]

蜡笔小新 2024-11-07 20:50:46
web
javax.mail.search.BodyTerm.matchPart()方法的使用及代码示例

javax.mail.search.BodyTerm.matchPart()方法的使用及代码示例 ... [详细]

蜡笔小新 2024-11-13 15:24:50
int
com.sun.javadoc.PackageDoc.exceptions()方法的使用及代码示例

com.sun.javadoc.PackageDoc.exceptions()方法的使用及代码示例 ... [详细]

蜡笔小新 2024-11-13 10:47:33
int
javascript分页类支持页码格式

前端时间因为项目需要，要对一个产品下所有的附属图片进行分页显示，没考虑ajax一张张请求，所以干脆一次性全部把图片out，然 ... [详细]

蜡笔小新 2024-11-12 14:58:57
int
com.hazelcast.config.MapConfig.isStatisticsEnabled()方法的使用及代码示例

com.hazelcast.config.MapConfig.isStatisticsEnabled()方法的使用及代码示例 ... [详细]

蜡笔小新 2024-11-12 14:33:17
search
解决Bootstrap DataTable Ajax请求重复问题

在最近的一个项目中，我们使用了JQuery DataTable进行数据展示，虽然使用起来非常方便，但在测试过程中发现了一个问题：当查询条件改变时，有时查询结果的数据不正确。通过FireBug调试发现，点击搜索按钮时，会发送两次Ajax请求，一次是原条件的请求，一次是新条件的请求。 ... [详细]

蜡笔小新 2024-11-12 13:59:27
web
如何使用 `org.apache.tomcat.websocket.server.WsServerContainer.findMapping()` 方法及其代码示例解析

如何使用 `org.apache.tomcat.websocket.server.WsServerContainer.findMapping()` 方法及其代码示例解析 ... [详细]

蜡笔小新 2024-11-11 10:08:55
int
如何使用 `org.eclipse.rdf4j.query.impl.MapBindingSet.getValue()` 方法及其代码示例详解

如何使用 `org.eclipse.rdf4j.query.impl.MapBindingSet.getValue()` 方法及其代码示例详解 ... [详细]

蜡笔小新 2024-11-11 02:42:52
int
解决Android EditText中TextWatcher的onTextChanged方法频繁触发问题

【问题】在Android开发中，当为EditText添加TextWatcher并实现onTextChanged方法时，会遇到一个问题：即使只对EditText进行一次修改（例如使用删除键删除一个字符），该方法也会被频繁触发。这不仅影响性能，还可能导致逻辑错误。本文将探讨这一问题的原因，并提供有效的解决方案，包括使用Handler或计时器来限制方法的调用频率，以及通过自定义TextWatcher来优化事件处理，从而提高应用的稳定性和用户体验。 ... [详细]

蜡笔小新 2024-11-10 12:50:42
int
使用 ListView 浏览安卓系统中的回收站文件

使用 ListView 浏览安卓系统中的回收站文件 ... [详细]

蜡笔小新 2024-11-09 16:34:55
int
异常处理：在任务完成后尝试将其转换为最终状态的操作分析

本文探讨了在任务完成后将其转换为最终状态时的异常处理机制。通过分析 `TaskCompletionSource` 的使用场景，详细阐述了其在异步编程中的重要作用，并提供了具体的实现方法和注意事项，帮助开发者更好地理解和应用这一技术。 ... [详细]

蜡笔小新 2024-11-09 11:54:28
int
使用纯JavaScript实现贪吃蛇游戏的开发技巧与解析

本文详细探讨了使用纯JavaScript开发经典贪吃蛇游戏的技术细节和实现方法。通过具体的代码示例，深入解析了游戏逻辑、动画效果及用户交互的实现过程，为开发者提供了宝贵的参考和实践经验。 ... [详细]

蜡笔小新 2024-11-08 13:56:09
int
Python 数据库操作指南：MySQL 与 Redis 实战技巧

本文详细介绍了使用 Python 进行 MySQL 和 Redis 数据库操作的实战技巧。首先，针对 MySQL 数据库，通过 `pymysql` 模块展示了如何连接和操作数据库，包括建立连接、执行查询和更新等常见操作。接着，文章深入探讨了 Redis 的基本命令和高级功能，如键值存储、列表操作和事务处理。此外，还提供了多个实际案例，帮助读者更好地理解和应用这些技术。 ... [详细]

蜡笔小新 2024-11-07 12:55:01
int
Java 曾经有过配对类吗？—— 探讨 Java 中 Pair 类的历史与现状

本文探讨了 Java 中 Pair 类的历史与现状。虽然 Java 标准库中没有内置的 Pair 类，但社区和第三方库提供了多种实现方式，如 Apache Commons 的 Pair 类和 JavaFX 的 javafx.util.Pair 类。这些实现为需要处理成对数据的开发者提供了便利。此外，文章还讨论了为何标准库未包含 Pair 类的原因，以及在现代 Java 开发中使用 Pair 类的最佳实践。 ... [详细]

蜡笔小新 2024-11-06 18:56:35
int
实验九：使用SharedPreferences存储简单数据

本实验旨在帮助学生理解和掌握使用SharedPreferences存储和读取简单数据的方法，包括程序参数和用户选项。 ... [详细]

蜡笔小新 2024-11-12 14:21:47

平凡2188

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章