`
zhang_yingjie
  • 浏览: 115793 次
  • 性别: 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 总结
评论
发表评论

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

相关推荐

    CSS水平居中总结(新手必看篇)

    在CSS布局中，水平居中是一项常见的需求，无论是对行内元素还是块状元素，都有多种方法可以实现。本文将详细讲解如何使用CSS使元素水平居中，特别适合初学者理解掌握。 首先，我们来看一下如何使行内元素如文本、...

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

    当需要对不定宽度的内容进行居中处理时，通常有多种方法可以实现这一效果，而使用CSS的定位技术则是一种常见的选择。 首先，我们来了解使用定位技术进行居中显示的原理。在CSS中，元素的定位可以通过position属性来...

    div居中常见问题.docx

    本文主要探讨了如何通过CSS实现不同类型的元素的水平居中。 首先，对于行内元素（如文本或图像），我们可以使用`text-align: center`属性将其在父元素内水平居中。例如，如果有一个包含文本的`div`元素，只需在CSS...

    div居中常见问题.pdf

    这两种方法都能有效地实现不定宽块状元素的水平居中，但具体使用哪种方法取决于场景和需求。例如，如果元素需要保持块级元素的行为，那么使用 `display: table` 可能更合适；如果希望元素与其他行内元素混排，那么 `...

    有条理、完整详细 前端笔记

    - 无序列表（`&lt;ul&gt;`）的使用。 - 如何构建简洁明了的信息列表。 - **3-2 使用ol，添加图书销售排行榜** - 有序列表（`&lt;ol&gt;`）的应用。 - 排名列表的设计。 - **3-3 认识div在排版中的作用** - `&lt;div&gt;`标签作为...

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