`
zhang_yingjie
  • 浏览: 112474 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

不定宽度的ul(列表)css水平居中

    博客分类：
  • css
CSSJavaXHTMLHTML 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>不定宽度的CSS水平居中</title>
        <style>
            ol, ul {
                list-style: none
            } 
			#cha {
                background: #00FFFF;
                height: 50px;
            }
			
			 #cha ul {
                text-align: center;
            } 
			#cha li {
                display: inline;
                padding: 0 8px;
            }
        </style>
    </head>
    <body>
        <div id="cha">
            <ul>
                <li>
                    <a href="http://www.codefans.net">[我居中了……]</a>
                </li>
                <li>
                    <a href="http://www.codefans.net">[我居中了……]</a>
                </li>
                <li>
                    <a href="http://www.codefans.net">[我居中了……]</a>
                </li>
                <li>
                    <a href="http://www.codefans.net">[我居中了……]</a>
                </li>
            </ul>
        </div>
    </body>
</html>
分享到：
| table-layout 总结
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS3自定义美化UL OL列表

    这是我们之前没有分享过的CSS3特效类型，它是一个可以自定义美化UL和OL列表的CSS3应用。当我们将鼠标滑过每一个列表项的时候都会出现一定的动画特效，效果非常不错。这种列表美化样式一共有3种，发光效果最酷了。

    css自适应宽度 多种方法实现宽度自适应的水平居中

    当父元素和子元素都没有定义宽度的情况下实现水平居中： display:inline-block 可以使用text-align:center和display:inline-block相结合，这个技巧需要一个父元素。 HTML代码: 复制代码代码如下: ”navbar”&gt; &lt;ul&gt;...

    css ul li导航菜单居中问题解决方法

    昨晚群里一个朋友帮忙解决的问题，之前没有遇到过，题目如下： 不改变html结构，使导航菜单垂直水平居中，导航宽度自适应屏幕100%，高度30px;单项高度28px,宽80px; 兼容：ie6+,ff,chrome,opera等主流浏览器。 ...

    css3-ul-ol列表

    css3-ul-li 设计列表，好看的列表样式，欢迎下载哦。亲测

    li浮动还可以居中ul

    li浮动还可以居中ul.html

    js+CSS 图片等比缩小并垂直居中实现代码.docx

    JS+CSS 实现图片等比缩小并垂直居中 在网页开发中，图片的缩放和垂直居中是非常常见的需求，而本文将介绍使用 JS+CSS 来实现图片等比缩小并垂直居中的代码。 首先，在 HTML 中，我们需要定义一个容器元素 `&lt;ul ...

    div+css有实例,易学易懂

    6.3.3 已知容器的大小而未知内容大小的水平和垂直居中问题 6.3.4 容器的大小和内容大小均未知的水平和垂直居中 6.3.5 修饰图片的水平和垂直居中 6.4 字体的综合属性 6.4.1 字体的选择 6.4.2 字体的大小 6.4.3 字体的...

    css+ul视频教程

    css ul 视频 教程

    通过定位来实现不定宽度居中显示

    在制作中内容居中通常方法是给容器width固定宽度，然后text-align:center;margin:0 auto;或者将块装换成内联元素display:inline，然后text-align:center就能实现居中效果了。 下面这个方法是通过定位来实现的效果：...

    CSS jQuery用ul模拟select下拉列表菜单效果.rar

    CSS jQuery用ul模拟select下拉列表菜单效果，将表单中常用的Select列表框变换了样式，更加漂亮了，而且引入了jQuery，加上了动画效果，在下拉的时候，自动向下滑出，使Select不那么呆板了。

    H5+CSS3.zip

    列表标签：使用&lt;ul&gt;实现无序列表，使用&lt;ol&gt;&lt;li&gt;实现有序列表； 使用标签添加图片，使用标签添加链接，使用table添加表格，使用thead、tbody、tfood定义表格； 表单标签：使用创建表单，文本输入框，密码输入框，数字...

    css+ul设计的多级导航菜单

    使用ul+css设计的多级导航菜单，不用写javascript脚本；要想加子菜单，直接往下面加ul标签及子标签就可以了

    DIV CSS布局教程：应用ul、li实现表格形式

    DIV CSS布局教程：应用ul、li实现表格形式DIV CSS布局教程：应用ul、li实现表格形式DIV CSS布局教程：应用ul、li实现表格形式

    CSS的水平导航条.docx

    CSS水平导航条 本文将详细介绍如何使用CSS和XHTML标记创建一个水平导航条，并讨论其实现方法和优缺点。 使用表格创建水平导航条 一种简单的方法是将所有链接放在一行文本中，就像示例A所示。这看起来很合理也很...

    ul列表中图片滚动JS，鼠标控制滚动

    在ul列表中用js实现图片的横向滚动，鼠标可以控制滚动。

    css用ul取代table

    用css技术把table表格用ul替换掉，灵活好用

    CSS的ul和li实现横向排列和去掉li的点

    怎么实现ul的横向排列和去掉li那个烦人的点，现在找到方法了，在此与大家分享下，感兴趣的朋友可以参考下，以备不时之需

    jQuery配合CSS的UL列表制作的动画下拉选择框

    内容索引:脚本资源,jQuery,下拉列表　jQuery配合CSS的UL列表制作的动画版下拉选择框，鼠标放到列表上，会展开所属的二级列表，其实动画效果不是太明显，不过作为学习jQuery的初级用户来说，简单的东西才更容易上手，...

    纯CSS UL LI下拉式菜单特效.rar

    纯CSS UL LI下拉式菜单特效，鼠标悬停于一级菜单时，会向下显示出二级子菜单，代码中没有涉及JavaScript代码，完全CSS代码来实现这款下拉菜单，符合WEB2.0标准哦。

Magicbox
Global site tag (gtag.js) - Google Analytics