热门标签 | HotTags
当前位置:  开发笔记 > 后端 > 正文

包含ul列表的盒子实现水平居中

想实现一个水平居中的

想实现一个水平居中的




1
ul

条,

1
ul




1
li

分别显示不同的背景色,并且水平居中。

想法是:分别给

1
ul

1
li

设置

1
background-color

属性,然后

1
li

水平排列。然后外面套个

1
div

盒子水平居中。

但是给

1
div

使用

1
margin: 0 auto;

的水平居中方法实现不了。只能用绝对定位的方法。但是使用绝对的定位方法又不知道盒子的宽度,用

1
transform:translate(-50%,0);

,据说兼容性不太好。

代码在这里

想问:

1.为什么第一种方法对本例实现不了水平居中?
2.有没有更易行的实现方法?

谢谢~


   



推荐阅读
  • 地球坐标、火星坐标及百度坐标间的转换算法 C# 实现
    本文介绍了WGS84坐标系统及其精度改进历程,探讨了火星坐标系统的安全性和应用背景,并详细解析了火星坐标与百度坐标之间的转换算法,提供了C#语言的实现代码。 ... [详细]
  • 本文介绍了Kettle资源库的基本概念、类型及其管理方法,同时探讨了Kettle的不同运行方式,包括图形界面、命令行以及API调用,并详细说明了日志记录的相关配置。 ... [详细]
  • 本文详细介绍了几种常见的CSS代码片段,包括元素居中、水平居中、垂直居中以及创建文字毛玻璃效果的方法,旨在为开发者提供实用的参考。 ... [详细]
  • 本文介绍如何利用纯CSS技术,通过简单的DOM结构和CSS样式设计,创建一个具有动态光影效果的太阳天气图标。 ... [详细]
  • 编程实践:创建抽奖游戏
    本文详细介绍了如何通过HTML、CSS和JavaScript构建一个简单的在线抽奖游戏,包括布局设计、样式设置和交互逻辑实现。 ... [详细]
  • SVG画布HTML5提供两种强有力的“画布”:SVG和Canvas。SVG的特点:SVG绘制的是矢量图,因此对图像进行放大不会失真基于XM ... [详细]
  • 动画队列的设计目的是为了确保一系列任务能够按照预定顺序执行,每个任务只有在其前一个任务完成后才开始。这些任务既可以是同步的,也可以是异步的。本文将探讨jQuery动画系统中的队列机制,并介绍如何使用队列来优化动画效果。 ... [详细]
  • 本文介绍了Java中的org.apache.jena.query.ResultSetFormatter.asXMLString方法,并提供了多个代码示例,帮助开发者更好地理解和应用此方法。 ... [详细]
  • 本文详细介绍了如何在Java项目中使用 org.apache.polygene.bootstrap.Energy4Java 类,并提供了多个实际应用的代码示例。 ... [详细]
  • 数据集成策略:ETL与ELT架构对比及工具选择
    随着企业信息化的深入发展,‘数据孤岛’问题日益突出,阻碍了数据的有效利用与整合。本文探讨了如何通过构建数据仓库解决这一问题,重点分析了ETL与ELT两种数据处理架构的特点及适用场景,为企业选择合适的ETL工具提供了指导。 ... [详细]
  • 本文详细介绍了如何在Python和PyTorch环境中实现Tensor与NumPy数组之间的转换,以及PIL图像对象与NumPy数组之间的相互转换。内容包括具体的转换函数及其使用示例。 ... [详细]
  • 欢迎学习交流!!!持续更新中…文章目录页面生成过程渲染重排与重绘的比较重排(reflow)常见引起重排的属性和方法重排影响的范围尽可能减少 ... [详细]
  • 本文探讨了在执行SQL查询时遇到的因字符集不同而导致查询结果差异的问题,特别是涉及中文字符时。文章分析了在不同字符集设置下,SQL查询结果的变化,并提供了详细的解决方案。 ... [详细]
  • OpenGL 实现骨骼动画平滑过渡技巧
    本文深入探讨了如何使用 OpenGL 实现骨骼动画之间的平滑过渡效果,重点介绍了动画数据的管理及混合算法的具体实现。 ... [详细]
  • TensorFlow 2.0 中的 Keras 数据归一化实践
    数据预处理是机器学习任务中的关键步骤,特别是在深度学习领域。通过将数据归一化至特定范围,可以在梯度下降过程中实现更快的收敛速度和更高的模型性能。本文探讨了如何使用 TensorFlow 2.0 和 Keras 进行有效的数据归一化。 ... [详细]
author-avatar
大--Man_815
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有