如何使 UL 元素内的列表项居中?

2024-05-03

如何在不使用额外的 div 或元素的情况下将列表项集中在 ul 内。我有以下内容。我想text-align:center就可以了。我似乎无法弄清楚。

<style>
ul {
    width:100%;
    background:red;
    height:20px;
    text-align:center;
}
li {
    display:block;
    float:left;
    background:blue;
    color:white;
    margin-right:10px;
}
</style>

<ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

检查jsfiddlehttp://jsfiddle.net/3Ezx2/1/ http://jsfiddle.net/3Ezx2/1/


write display:inline-block代替float:left.

li {
        display:inline-block;
        *display:inline; /*IE7*/
        *zoom:1; /*IE7*/
        background:blue;
        color:white;
        margin-right:10px;
}

http://jsfiddle.net/3Ezx2/3/ http://jsfiddle.net/3Ezx2/3/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使 UL 元素内的列表项居中? 的相关文章

  • 有没有办法改变输入类型=“日期”格式?

    默认情况下 输入type date 显示日期为YYYY MM DD 问题是 是否可以将其格式强制为 DD MM YYYY 无法更改格式 我们必须区分有线格式和浏览器的表示格式 接线格式 The HTML5日期输入规范 https www w
  • grid-auto-columns 在 Firefox 中不能完全工作

    我不明白为什么 DIV 3 的大小与 DIV 1 DIV 2 的大小不同 https codepen io anon pen vaVqPW https codepen io anon pen vaVqPW grid display grid
  • 自动调整Google网站嵌入代码的高度(html)

    我正在使用 Google 协作平台嵌入 HTML 代码 将代码粘贴到 从网络嵌入 窗口中 输出的长度是可变的 我希望有一种方法可以动态调整父级的高度iframeGoogle 协作平台用于托管我的 HTML 我知道我可以使用 Google 协
  • 有没有办法禁用网站上表单的自动填写? [复制]

    这个问题在这里已经有答案了 我最近才学会使用创建网站HTML and PHP 我创建了一个网站 其中有一个测验 要求人们随机翻译单词 用户将他们的答案输入到表格中 网站评估答案是否正确 现在 当一个问题在一个会话中被问两次时 就会出现自动填
  • 使用日语“Enter”键进行搜索功能

    我在日语方面遇到了问题 我有一个允许用户搜索数据的表单 当用户输入要搜索的字符串并按 Enter 键时 搜索功能就会执行 我的代码是 formSearch input keyup function event var key event c
  • 如何向 Rails 应用程序添加自定义字体?

    我想在 RoR 应用程序中使用几种字体 但它们的格式主要是 ttf 和 otf 等 我该如何将这些文件嵌入到我的 Rails 应用程序中 也就是说 一旦我将它们放入我的资产文件夹中 将它们嵌入我的 CSS 和 或 LESS 文件中的语法到底
  • Perl:HTTP::微小删除留下损坏的锚标记

    我编写了一个脚本 该脚本收集从数据库读取的缓冲区内的所有 URL 检查该页面是否仍然存在 并使用 HTTP Tiny 从缓冲区中删除 URL 如果该 URL 无法访问或返回无效 问题是 HTTP Tiny 删除左锚标记 例如此处无效的文本
  • 淘汰赛绑定,每个都可进行自定义

    我这里有一个情况 用于淘汰每个带有定制的绑定 这是我的代码 div div table tbody tr td td td td tr tbody table div div
  • ToggleClass 动画 jQuery?

    我的网站上有一个部分 当用户单击时我希望它展开 我正在使用 jQuerytoggleClass为了这 expandable function e e preventDefault this closest article toggleCla
  • html css 下拉菜单

    这是我第一次在 Stack Overflow 上发帖 我不熟悉论坛发帖规定 所以请让我知道我做错了什么 我在论坛中研究过这个问题 但我所遇到的一切都没有给我明确的答案 我试图从 新闻 元素创建一个下拉菜单 但在运行代码时我从未得到任何可见的
  • 如何使用 vanilla JS 实现可维护的反应式 UI

    今天我遇到了一个问题 可以通过使用像 Vue 这样的反应式和状态管理框架来轻松解决 遗憾的是 无法使用它 以下 简化 情况 链接到代码笔 https codepen io theiaz pen BazErKV 我们有一个服务器渲染的页面 其
  • 如何在php中使用preg添加html属性

    我正在寻找在 php 中编写一个脚本来扫描 html 文档并根据它找到的内容向元素添加新标记 更具体地说 我是扫描文档并为每个元素搜索CSS标记 float right left 如果找到它 它会添加align right left 基于它
  • Django - 提交具有同一字段多个输入的表单

    预警 我对 Django 以及一般的 Web 开发 非常陌生 我使用 Django 托管一个基于 Web 的 UI 该 UI 将从简短的调查中获取用户输入 通过我用 Python 开发的一些分析来提供输入 然后在 UI 中呈现这些分析的可视
  • 禁用特定 div 上的 Tab 键

    我有以下结构 div div Some content div div Some content div div 我想 禁用 div2 上的 tab 键 我的意思是按下 tab 键时 div2 的元素不会获得焦点 有没有简单的方法可以使用
  • 如何在html中制作多行类型的文本框?

  • Knockout.js 安全绑定

    我想使用带有淘汰赛的安全绑定 为此我使用敲除安全绑定 js https github com brianmhunt knockout secure binding 谁能解释一下为什么下面的代码不起作用 它会抛出一个错误 未捕获 淘汰 安全
  • HTML 输入 - 名称与 ID [重复]

    这个问题在这里已经有答案了 使用 HTML 时
  • 我可以根据同一容器中另一个元素的大小强制内联文本换行吗?

    考虑这个 jsbin http jsbin com ElIKOKe 3 edit html css output 我有这个html div class container span The lime outlined container h
  • 从输入类型编号获取无效值

    我正在使用输入类型数字 当它无效时 我如何从中获取值 例如 使用类型编号并仅打印 e 这本身是无效的 我正在使用 React 但我认为这个问题非常普遍 onChange event console log event target valu
  • 如何从 bootstrap-markdown.js 调用 .getContent 和 .parseContent

    我是使用 Bootstrap 插件的新手 刚刚通过代码学院 http www codecademy com en skills make an interactive website 我真的很想用这个很棒的引导 Markdown 插件 ht

随机推荐