当div没有设置宽度，使用width的fit-content和margin:auto实现元素的水平居中
当我们做水平居中的时候，会有许多方法，margin:0 auto,或者test-align:center,以及flex布局。当元素的width不固定的时候，我们如何实现水平居中呢，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
margin:0 auto;
}
li{
list-style: none;
float: left;
margin-right: 10px;
}
</style>
</head>
<body> <div class="navbar center">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/">关于我们</a></li>
<li><a href="/">产品展示</a></li>
<li><a href="/">客户支持</a></li>
<li><a href="/">联系我们</a></li>
</ul>
</div> </body>
</html>
效果如下：
并没有居中，这个时候我们可以用fit-content来实现水平居中了，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
width: -moz-fit-content;
width: fit-content;
margin:0 auto;
}
li{
list-style: none;
float: left;
margin-right: 10px;
}
</style>
</head>
<body> <div class="navbar center">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/">关于我们</a></li>
<li><a href="/">产品展示</a></li>
<li><a href="/">客户支持</a></li>
<li><a href="/">联系我们</a></li>
</ul>
</div> </body>
</html>
此时我们就可以实现水平居中了，但是fit-content这个是css3新增的属性，仅支持谷歌和火狐浏览器
当div没有设置宽度，使用width的fit-content和margin:auto实现元素的水平居中的更多相关文章
- HTML学习之给div高度设置百分比不生效的问题
这几天在学习HTML的知识,今天想做一个极为简单的页面,就是分为头部,内容和底部,本来用三个div即可,可是给div高度设置百分比时发现不生效,具体页面如下,非常简单. 下面是html部分: < ...
- DIV+CSS设置及问题总结
HTML 中有用的字符实体 注释:实体名称对大小写敏感! 显示结果 描述 实体名称 实体编号 空格 < 小于号 < < > 大于号 > > & ...
- div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...
- firefox ie chrome 设置单元格宽度 td width 有bug,不能正常工作。以下方式可以解决
1. firefox ie chrome 设置单元格宽度 td width 有bug,不能正常工作. 如果是上面一行 和下面一行是分别属于两个table,但是他们的列需要对齐,也就是说分开画的,然后设 ...
- ueditor 设置高度height. ue.setHeight(400); 设置宽度 width
1.引入的文件: <script type="text/javascript" src="../../dist/ueditor1_4_3-utf8-php/uedi ...
- 表格单元格td设置宽度无效的解决办法 .
http://zzstudy.offcn.com/archives/11366 在做table页面时,有时对td设置的宽度是无效的,td的宽度始终有内部的内容撑开,可以设置padding,但直接设置w ...
- span设置宽度有效无效问题
在html中如何设定span的宽度?这看上去是个很简单的问题,似乎用style中的width属性就可以.例如, <!DOCTYPE html PUBLIC "-//W3C//DTD X ...
- 实现span设置宽度（行内元素本来不支持调宽度高度这些样式）（变成行内块元素：display:inline-block;）
实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;) 一.总结 1.将span从行内元素变成行内快元素就可以调了: 设置样式的时候 ...
- 表格 td 设置宽度无效问题
现在有个需求,就是表格的列不固定,都是动态加载的,想给每一列设置宽度,但是设置 width:100xp,没有效果,不过设置min-width:100px 就有效果了,table的宽度为 td的宽度和 ...
随机推荐
- java web hello world（一）
首先在eclipse 里面创建一个java 动态项目, 记住路径,这里是直接通过根目录直接访问的webContent目录下面 的文件, 创建好后 ,在本地配置Tomcat服务器, 将server加入到 ...
- .net安装部署“Error 1001 在初始化安装时发生异常” 的解决方法
状况描述:打包安装后,如果删除安装目录中的某个文件,这时从桌面快捷方式启动软件系统会自动运行修复程序,此时因为路径问题会报出“错误 1001 在初始化安装时发生异常xxx”的异常.(前提是你的安装部署 ...
- Wireshark 分析捕获的数据记录
使用 Wireshark 选取你要抓包的网络接口,并设置你的过滤器之后,当有数据通信后即可抓到对应的数据包,这里将分析其每一帧数据包的结构. 每一帧数据都有类似的结构组成,我这里使用抓到一个对应的pi ...
- Linux 网络子系统之网络协议接口层（一）
Linux 网络设备驱动之网络协议接口层介绍. 网络协议接口层最主要的功能是给上层协议提供透明的数据包发送和接收接口. 当上层ARP或IP需要发送数据包时,它将调用网络协议接口层的dev_queue_ ...
- hive thrift 开机启动
这个问题困扰我很久,之前redis的时候,也出现了这个问题,从网上找的thrift脚本没有一个好使的,最后通过修改/etc/rc.d/rc.local来执行一些非服务的命令,这样子就不需要像写服务那样 ...
- DevExpress gridcontrol学习知识点
.//允许自动合并单元格gv1.OptionsView.AllowCellMerge = true; 设置某列不合并 选中该列,在OptionsColumns-->AllowMerge中设置为f ...
- Entity Framework应用：使用LINQ操作
一.什么是LINQ TO EntitiesLINQ,全称是Language-INtegrated Query(集成语言查询),是.NET语言中查询数据的一种技术.LINQ to Entities是一种 ...
- 【安装Python环境】之安装Selenium2时报UnicodeDecodeError: 'utf-8' codec can't decode byte 0xc8 in position 12: invalid continuation byte问题
问题描述: windows8.1系统,Python3环境安装Selenium2时报错,错误如下: ..... ..... File "F:\软件\python3.6.1\lib\site-p ...
- jQuery EasyUI教程之datagrid应用
一.利用jQuery EasyUI的DataGrid创建CRUD应用 对网页应用程序来说,正确采集和管理数据通常很有必要,DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录.本教 ...
- (转)I,P，B帧和PTS，DTS的关系
基本概念: I frame :帧内编码帧 又称intra picture,I 帧通常是每个 GOP(MPEG 所使用的一种视频压缩技术)的第一个帧,经过适度地压缩,做为随机访问的参考点,可以当成图象. ...