修复上一个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

推荐阅读

go
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
php
使用圣杯布局模式实现网站首页的内容布局

本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法，包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]

蜡笔小新 2023-12-10 20:09:23
function
javascript – 概述在Firefox上无法正常工作

我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观：而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]

蜡笔小新 2023-12-14 10:20:38
function
Python正则表达式学习记录及常用方法

本文记录了学习Python正则表达式的过程，介绍了re模块的常用方法re.search，并解释了rawstring的作用。正则表达式是一种方便检查字符串匹配模式的工具，通过本文的学习可以掌握Python中使用正则表达式的基本方法。 ... [详细]

蜡笔小新 2023-12-13 16:37:19
instance
org.apache.catalina.LifecycleEvent类的使用及代码示例

标题： ... [详细]

蜡笔小新 2023-12-13 11:03:10
function
Html5-Canvas实现简易的抽奖转盘效果

本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果，同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码，并展示了实现的基本效果。 ... [详细]

蜡笔小新 2023-12-13 06:02:20
function
单击时动态创建
元素 - Dynamically create
element on click

Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]

蜡笔小新 2023-12-12 15:59:36
function
MooTools和JQuery并排 - MooTools and JQuery Side by Side

IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]

蜡笔小新 2023-12-12 13:43:58
post
Android实战——jsoup实现网络爬虫，糗事百科项目的起步

本文介绍了Android实战中使用jsoup实现网络爬虫的方法，以糗事百科项目为例。对于初学者来说，数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据，并以糗事百科作为练手项目。同时，提到了使用jsoup需要结合前端基础知识，以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]

蜡笔小新 2023-12-11 09:19:45
post
HTML中表格的页眉页脚布局解决方案

本文介绍了在HTML中实现表格的页眉页脚布局的解决方案。通过基本的HTML/CSS技术，避免使用内联样式和固定定位，实现了一个标准的页眉页脚布局。提供了一个替代的解决方案，为读者提供了参考。 ... [详细]

蜡笔小新 2023-12-10 15:50:47
function
jQuery图片预加载+等比例缩放

本文介绍了使用jQuery实现图片预加载和等比例缩放的方法，同时提供了演示和相关代码。该方法可以重置图片的宽度和高度，并使图片在水平和垂直方向上居中显示。 ... [详细]

蜡笔小新 2023-12-09 17:59:12
int
常用的CSS属性及用法整理

本文整理了常用的CSS属性及用法，包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等，方便开发者查阅和使用。 ... [详细]

蜡笔小新 2023-12-09 03:01:43
stream
向QTextEdit拖放文件的方法及实现步骤

本文介绍了在使用QTextEdit时如何实现拖放文件的功能，包括相关的方法和实现步骤。通过重写dragEnterEvent和dropEvent函数，并结合QMimeData和QUrl等类，可以轻松实现向QTextEdit拖放文件的功能。详细的代码实现和说明可以参考本文提供的示例代码。 ... [详细]

蜡笔小新 2023-12-14 16:06:38
int
android listview OnItemClickListener失效原因

最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ... [详细]

蜡笔小新 2023-12-14 14:25:50
int
PhysioNet生理信号处理（三）WFDB Toolbox for Matlab的安装和使用方法

本文介绍了PhysioNet网站提供的生理信号处理工具箱WFDB Toolbox for Matlab的安装和使用方法。通过下载并添加到Matlab路径中或直接在Matlab中输入相关内容，即可完成安装。该工具箱提供了一系列函数，可以方便地处理生理信号数据。详细的安装和使用方法可以参考本文内容。 ... [详细]

蜡笔小新 2023-12-13 20:46:48

平凡2188

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

Tags | 热门标签

RankList | 热门文章