`
zhang_yingjie
  • 浏览: 115366 次
  • 性别: 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水平垂直居中

    本篇文章将详细介绍如何通过 CSS 实现内容的水平垂直居中，并且无需指定具体的宽度和高度。 #### 步骤详解 1. **创建容器 div**： - 首先创建一个外层 div，为其分配一个自定义的 ID。 2. **嵌套内部 div**： ...

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

    本文将详细讲述几种实现自适应宽度水平居中的CSS方法。 1. 使用display:inline-block和text-align:center 此方法适用于父元素和子元素均未定义具体宽度时，通过设置父元素的text-align属性为center，并使子元素的...

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

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

    css3-ul-ol列表

    在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的样式控制功能，尤其是在处理无序列表（`ul`）和有序列表（`ol`）时，可以创造出各种美观、富有创意的列表样式。`ul`列表通常用于展示项目列表，而`ol`...

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

    在给定文件中，演示了如何通过相对定位来实现列表项（li元素）的不定宽度居中显示。这种方法的核心在于，先将包含列表项的容器（ul元素）本身相对定位，并将其向左移动50%，使其左边缘位于页面中心位置。然后，将每...

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

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

    纯css3响应式的水平时间轴布局代码

    【纯CSS3响应式水平时间轴布局代码详解】 在网页设计中，时间轴布局是一种常见的展示数据或事件序列的方式，它能清晰地呈现信息的发展脉络。随着移动设备的普及，响应式设计变得至关重要，使得网页能在不同尺寸的...

    li浮动还可以居中ul

    li浮动还可以居中ul.html

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

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

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

    标题中的“DIV CSS布局教程：应用ul、li实现表格形式”指的是使用HTML的无序列表（`&lt;ul&gt;`）和列表项（`&lt;li&gt;`）元素，通过CSS样式来模拟传统HTML表格（`&lt;table&gt;`）的效果。这种方法常用于创建灵活、响应式的布局，...

    CSS列表样式设计

    本篇将重点讲解如何利用CSS进行列表样式的定制，让您的网页列表更具吸引力。 一、基本列表样式 在HTML中，列表主要分为无序列表（`&lt;ul&gt;`）和有序列表（`&lt;ol&gt;`），以及定义列表（`&lt;dl&gt;`）。CSS可以通过选择器来操作...

    超酷CSS水平导航菜单

    一个简单的水平导航菜单通常由`&lt;ul&gt;`（无序列表）和`&lt;li&gt;`（列表项）组成。例如： ```html &lt;ul class="menu"&gt; &lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;关于&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;服务&lt;/a&gt;&lt;/li&gt; ...

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

    首先，我们来探讨如何使用CSS实现无序列表ul和列表项li的横向排列以及如何去掉li项前面的默认样式——点。这一需求在网页设计中是非常常见的，特别是当需要制作水平导航栏时。 在CSS中，为了实现ul的横向排列，我们...

    css列表

    例如，以下代码将列表项水平排列： ```css ul { display: flex; flex-wrap: wrap; } li { flex: 1 0 25%; /* 每个列表项占据25%的宽度 */ margin-bottom: 10px; /* 添加垂直间隔 */ } ``` 此外，列表也可以...

    纯CSS下拉菜单，宽度自适应

    4. **响应式设计**：纯CSS下拉菜单也可以适应不同设备的屏幕尺寸，实现宽度自适应。利用媒体查询（`@media`）可以针对不同屏幕大小调整菜单的布局和样式，确保在移动设备上也有良好的用户体验。 5. **固定高度与...

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

    以上代码实现了鼠标在`ul`列表边缘移动时，图片会自动水平滚动的效果。你可以根据实际需求调整滚动速度、触发滚动的鼠标位置阈值等参数。 总结一下，这个案例涉及到的主要知识点有： - HTML的`&lt;ul&gt;`和`&lt;li&gt;`标签 -...

    自适应宽度且居中的分页

    `，我们可以使分页导航在容器内水平居中，同时，通过调整每个分页按钮的宽度和间距，使其能适应不同的屏幕尺寸。 2. **CSS Grid**：CSS Grid是另一种强大的布局工具，适用于二维布局，例如行和列。虽然它可能在处理...

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