【Html】水平居中总结-不定宽块状元素方法(二)
2015-12-10 17:57
555 查看
第二种方法:改变块级元素的 display 为 inline 类型,然后使用 text-align:center 来实现居中效果。如下例子:
html代码:
css代码:
这种方法相比第一种方法的优势是不用增加无语义标签,简化了标签的嵌套深度,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。
html代码:
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body>
css代码:
<style> .container{ text-align:center; } .container ul{ list-style:none; margin:0; padding:0; display:inline; } .container li{ margin-right:8px; display:inline; } </style>
这种方法相比第一种方法的优势是不用增加无语义标签,简化了标签的嵌套深度,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。
相关文章推荐
- 【Html】水平居中总结-不定宽块状元素方法(一)
- window、document、html、body、element的事件属性比较
- html获取url中的参数
- 【Html】水平居中设置-行内元素
- HTML-浮动与清除浮动
- HTML的16个全局属性
- HTML语义化
- C# Winform 中webBrowser显示html内容时禁止错误提示的方法
- html:option
- html判断id是否存在
- ****HTML模板资源汇总
- 115 html IE9的a标签嵌套问题
- Html知识总结
- 【Html】字体缩写
- 使用DOM操纵HTML文档几点粗浅认识
- 区别:DOM Core 与 HTML-DOM
- HTML DOM Table 对象
- HTML DOM - 修改 HTML 内容
- HTML DOM - 元素
- HTML的16个全局属性