html ul左侧浮动,UL里的LI元素左浮动层一行显示时使其居中的方法

在制作页面是,li浮动是很常用的,一般情况也不用其居中,但有时,其特殊原因需要居中,这是就有点犯难了,这里有了一个很好的解决方法,主要是用了相对定位的原理。

在ul外报一层,使其相对定位,再ul相对定位,距左50%,li相对定位,距右50%就实现了li左浮动后海居中显示。

复制代码代码如下:

无标题文档

div, ul, li {

margin: 0;

padding: 0;

border: 0;

}

body {

font: 12px/1.6em 宋体 sans-serif;

color: #585858;

text-align: center;

}

.div1 {

position:relative;

width: 948px;

height: 100px;

margin: 20px auto 0 auto;

background-color: #F9F9F9;

border: solid 1px #D4D4D4;

}

.div1 ul {

position: relative;

left: 50%;

float: left;

}

.div1 li {

position: relative;

right: 50%;

display: inline;

float: left;

margin-left: 10px;

line-height: 38px;

}

  • 飞科工作室
  • 飞科工作室
  • 飞科工作室
  • 飞科工作室
  • 飞科工作室
  • 飞科工作室
  • 飞科工作室
  • 飞科工作室
  • 飞科工作室
  • 飞科工作室

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/339911.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

aws s3 獲取所有文件_AWS SA associate 证书考试学习记录-EBS,S3,EFS比较

我们的目标,就是花最少的时间,学到最多的东西:-)在AWS中,可以选择的存储服务很多,纷繁复杂,新手根本弄不清楚选择哪个。因为做为一个云架构师,你并不是让你的产品能用就够了&#xf…

ios调用restful接口_做iOS上最好的REST API测试App

对于Web开发者和移动应用开发者来说,少不了和REST API打交道。何为REST API,维基百科是这么解释的(https://zh.wikipedia.org/wiki/REST)REST(英文:Representational State Transfer)是Roy Thomas Fielding博士于2000年在他的博士论文中提出来…

Java 14:记录

Java 14是在几周前问世的,它引入了Record类型,它是一个不变的数据载体类,旨在容纳一组固定的字段。 请注意,这是预览语言功能 ,这意味着必须使用--enable-preview标志在Java编译器和运行时中显式启用它。 我将直接介绍…

html设置顶部对齐,HTML / CSS文本从div顶部对齐

首先,你需要修复你的CSS选择器 .你可以通过这种方式t write all those id .#content #main #services只需选择1个元素和他的孩子 .例如,如果你测试它,它将适用于你:#services .langelis .txt {width: 440px;height: auto;float: l…

java与java ee_计划Java EE 7批处理作业

java与java eeJava EE 7添加了使用JSR 352以标准方式执行批处理作业的功能。 <job id"myJob" xmlns"http://xmlns.jcp.org/xml/ns/javaee" version"1.0"><step id"myStep"><chunk item-count"3"><rea…

html5 video 播放状态,10分钟了解HTML5的Video标签属性、方法和事件

标签的属性src &#xff1a;视频的属性poster&#xff1a;视频封面&#xff0c;没有播放时显示的图片preload&#xff1a;预加载autoplay&#xff1a;自动播放loop&#xff1a;循环播放controls&#xff1a;浏览器自带的控制条width&#xff1a;视频宽度height&#xff1a;视频…

hot编码 字符one_One Hot编码是什么?为什么要用它,什么时候用它?

作者&#xff1a;Rakshith Vasudev编译&#xff1a;ronghuaiyang导读当你在玩ML模型的时候&#xff0c;你会在任何地方遇到这个“One hot encoding”的术语。当你在玩ML模型的时候&#xff0c;你会在任何地方遇到这个“One hot encoding”术语。你可以看到一个one hot编码器的s…

CUBA 7.2 –有什么新功能?

CUBA平台的第七版向前迈出了一大步。 内部体系结构的改进和新的IDE为进一步改进奠定了良好的基础。 我们将继续添加新功能&#xff0c;以使开发人员的生活更轻松&#xff0c;并使他们的工作更加高效。 在7.2版中&#xff0c;我们引入了许多可能看起来像是主要更新的更改&#…

postgresql 分区视图_PostgreSQL架构集中式到分布式主流架构总结

文章目录一、PG未来主流架构为什么是分布式二、PostgreSQL集中式到分布式架构总结一、PG未来主流架构为什么是分布式如果说5年前DB的分布式还只是一种趋势&#xff0c;如今分布式数据库正逐渐从趋势变成主流。说到分布式&#xff0c;我想我们不能不提一下集中式和分库分表。01集…

html5 上传图片模板,HTML5实现图片文件异步上传

&#xff0c;过现前个能文使近记接的端问对字用近记接  利用HTML5的新特点做文件异步上传非常简单方便&#xff0c;本文主要展示JS部分&#xff0c;html结构。下面的代码并未使用第三发库&#xff0c;如果有参照&#xff0c;请注意一些未展现出来的代码片段。我这边的效果预览…

dot2谜团png_一个类加载的谜团解决了

dot2谜团png面对一个好老问题 我在应用程序服务器上遇到一些类加载问题。 这些库被定义为Maven依赖项&#xff0c;因此被打包到WAR和EAR文件中。 不幸的是&#xff0c;其中一些还安装在应用程序服务器中&#xff0c;但版本不同。 启动应用程序时&#xff0c;我们遇到了与这些类…

python log文件如何不写入syslog_Centos下python 对syslog重写进行日志记录

在Linux 环境下&#xff0c;python自带一个syslog的模块可以进行日志记录。python可以利用logging模块来重写syslog&#xff0c;这样就可以自定义写入文件的文件名。如果不做配置则直接写入到/var/log/message文件里。首先先写log.py,代码如下&#xff1a;importosimportsysimp…

html中可以有两个h1,在一个HTML中h1标签能出现几次?h1标签和标题标签

首页 > web前端 > html教程 > 正文 在一个HTML中h1标签能出现几次&#xff1f;h1标签和标题标签的差别是什么&#xff1f; 2018-08-29 10:57:28本篇文章主要介绍了关于HTML h1标签的一些解释&#xff0c;有html h1标签和html title标签的区别&#xff0c;还有网页中h1…

Java中的记录类型

2020年3月发布的JDK 14引入了记录 &#xff08;预览语言功能&#xff09;&#xff0c;这些记录提供了一种紧凑的语法来声明主要用于保存数据的类。 在记录中 &#xff0c;所有低级&#xff0c;重复且容易出错的代码都类似于构造函数&#xff0c;访问器和通用方法&#xff0c;例…

angular 注入器配置_Angular依赖注入介绍

依赖注入(DI -- Dependency Injection)是一种重要的应用设计模式。Angular里面也有自己的DI框架&#xff0c;在设计应用时经常会用到它&#xff0c;它可以我们的开发效率和模块化程度。依赖&#xff0c;是当类需要执行其功能时&#xff0c;所需要的服务或对象。DI是一种编码模式…

山东省102021年普通高考成绩查询,山东高考成绩今日发布!成绩查询看这里!

原标题&#xff1a;山东高考成绩今日发布&#xff01;成绩查询看这里&#xff01;山东高考生注意啦~今天16:20举行山东2020年夏季高考第二次新闻发布会届时将会公布高考录取政策、分数线情况等今天17:00公布2020夏季高考与等级考成绩发布会怎么看&#xff1f;高考成绩怎样查&am…

可变对象 不可变对象区别_对象应该是不可变的

可变对象 不可变对象区别在面向对象的编程中&#xff0c;如果对象的状态在创建后无法修改&#xff0c;则它是不可变的 。 在Java中&#xff0c;不可变对象的一个​​很好的例子是String 。 创建后&#xff0c;我们无法修改其状态。 我们可以要求它创建新的字符串&#xff0c;但…

判别分析分为r型和q型吗_SPSS聚类和判别分析参考.ppt

SPSS聚类和判别分析参考10.1主成分分析和因子分析简介 3 常用术语 (1)因子载荷 (2)变量共同度 (3)公共因子的方差贡献 10.1主成分分析和因子分析简介 10.1.2主成分和公因子数量的确定 (1) 确定时遵循几个原则 主成分的累积贡献率&#xff1a;一般来说&#xff0c;提取主成分的累…

计算机应用基础人才培养方案,1. 培养方案(计算机应用基础课程).doc

人才培养方案一、课程定位和课程目标1、课程性质和任务  《计算机应用基础》是高职高专教育中的一门理论与实践相结合的基础必修课&#xff0c;是培养大学生信息素养的必修课程。但与普通的素质教育课程不同&#xff0c;由于计算机应用的普及性和广泛性&#xff0c;学生的计算…

使用SoapUI调用不同的安全WCF SOAP服务-基本身份验证,第二部分

在本系列的第一篇文章中&#xff0c;我们创建了一个基本的身份验证服务&#xff0c;以使用SoapUI进行调用。 因此&#xff0c;在第二篇文章中&#xff0c;我们将逐步演示如何使用此工具成功调用这种服务。 使用SoapUI的1-Basic WCF SOAP –创建新的SOAP项目 首先&#xff0c;我…