html-lists 相关问题

将菜单栏与文本和图标元素以及其外部的购物车图标垂直对齐

我有一个菜单栏，其中包含文本项和搜索图标（.main-navigation）。此外，在此菜单栏旁边但在其外部有一个购物车图标 (.site-header-cart)。我需要这些...

确保用户从 html 表单中过滤后的<UL>中选择项目

我有一个带有多个标签的html表单（名称、日期、时间、订单号、任务、注释是主要输入）。 在订单号输入中，当用户开始输入时，会出现一个 ... 我有一个带有多个<input>标签的html表单（名称、日期、时间、订单号、任务、注释是主要输入）。 在订单号输入中，当用户开始输入时，会出现一个 <ul>，并根据用户在订单号输入中输入的内容进行过滤。 我希望他们在移动到下一个字段之前从列表中进行选择。这是出于数据验证的原因。因此，如果他们在输入中键入 mee，MEETINGS 将出现在列表中。 mee 提交表单时的数据无效。 onblur=function() 不起作用 - 它在加载表单时显示列表而不进行过滤。 document.getElementById('myInput').addEventListener('blur', function() {} 与 document.getElementById('myUL').orderlistElement.querySelector('li.active') 一起工作，因为它检测到尚未做出选择。它告诉用户（通过 alert()）他们已离开输入框而没有进行选择，但他们必须离开输入框才能进行选择，因此每次都会出现。 我在提交时对表单输入进行验证，但我希望在问题发生时提请用户注意。 在尝试编写代码之前，我什至无法想到其中的逻辑。也许有一个行业术语来形容我想要实现的目标。 类似于： 检查用户是否已离开 <input>, 设置状态变量， 如果下一个操作是从列表中选择，那么很好，否则会显示错误消息并重新关注订单<input>。 我想我的问题很简单，逻辑是什么？希望我已经包含了足够的信息。 当输入获得焦点并且有值时，显示过滤后的结果。当选择过滤结果之一时，将输入的值设置为等于所选项目。 选择一个值将触发输入的模糊事件。在此输入的模糊事件上，调用一个等待节拍的函数（避免 onblur 触发和所设置的值之间的竞争条件），然后测试输入值是否等于列表中的任何值。如果没有，请告诉用户他们需要输入/选择一个值并将焦点添加回输入。

居中<ul>列表

我一直在努力寻找解决这个问题的方法，但到目前为止没有任何效果。我希望我能得到一些帮助。 我正在尝试让一个正常的 列表位于页面中心。我的方式... 我一直在努力寻找解决这个问题的方法，但到目前为止没有任何效果。我希望我能得到一些帮助。 我正在尝试让一个正常的 <ul> 列表位于页面中心。我一直在考虑解决这个问题的方法是将列表嵌入到 div 中，然后简单地使用 margin: 0 auto; 将 div 居中。 但我的问题是，默认情况下，列表似乎采用其父级的 100% 宽度。 那么如何将实际列表宽度调整为与最长列表项一样长呢？ 这是我正在尝试做的事情的说明： 或者，或者（我对任一解决方案都可以）： 谢谢。 要将宽度调整为最长的项目，请将 display: inline-block; 添加到您的 ul 元素 JSfiddle HTML <h1>title </h1> <li> list item 1 </li> <li> list item item 2 </li> <li> list item item item 3 </li> <li> list item 4 </li> 还有CSS h1, li{ text-align:center; } 您只需将 ul 的显示属性调整为“inline-block”，如下所示： 您还必须将 ul 元素的文本向左对齐，使其不居中。 最后一件事。无序列表有很多填充，可能会偏离居中位置。所以我删除了填充以使其更好地居中。您可能需要调整填充以满足您的需要。 http://jsfiddle.net/k84Rz/ #centeredDiv { width: 100%; margin: 0 auto; text-align: center; } #centeredDiv ul { display: inline-block; text-align: left; padding: 0; } 您可以使用 display: table; + margin: auto 小提琴 ul{ border: 1px solid red; display: table; list-style-type: none; margin: auto; } 要实现类似于第一个插图的效果，请使用 width: fit-contents 来限制列表项的宽度。添加 margin-left: auto 和 margin-right: auto 将项目居中。 li { width: fit-content; margin-left: auto; margin-right: auto; }

如何使用 Selenium 在组合输入和 li 字段中选择选项？

我遇到了一个我不知道如何迭代其选项的字段。我需要能够一一选择每个元素，以便页面加载关联信息，然后检索该信息

待办事项列表 CSS 定位

如何将待办事项列表栏的新列表项上的 2 个按钮移至右侧。 我只想知道将按钮添加到任务栏右侧的常见方法是什么。 我尝试使用 justify-

如何按字母顺序对列表进行排序？

按字母顺序对 HTML 列表进行排序的 Javascript 代码是什么？ 例如： NBA球队： - 萨克拉门托国王队 - 芝加哥公牛队 - 亚特兰大老鹰队 - 印第安纳步行者队 - 洛杉矶湖人队 - 波士顿凯尔特人队 我想要...

如何按字母顺序对列表进行排序？ （html/JS代码）

按字母顺序对列表进行排序的 html/javascript 代码是什么？ 例如： NBA球队： 萨克拉门托国王队 芝加哥公牛队 亚特兰大老鹰队 印第安纳步行者队 洛杉矶湖人队 波士顿凯尔特人队 我想做...

将嵌套的ul解析为js中的嵌套数组

如何将任意深度的嵌套 ul 解析为保持 ul 结构的嵌套数组。例子： 操作员1 如何将任意深度的嵌套 ul 解析为保持 ul 结构的嵌套数组。示例： <ul> <li class="operator">operator1</li> <ul> <li class="operator">operator2</li> <ul> <li class="condition">condition 1</li> <li class="condition">condition 2</li> </ul> <li class="condition">condition3</li> </ul> 必须解析为： [operator1,[operator2,[condition1],[condition2]],[condition3]] 我试过： const parseListItems = (e) => { const listItems = e.querySelectorAll('li') const resultArray = [] listItems.forEach(item => { const nestedUl = item.querySelector('ul') if (nestedUl) { console.log('ul') const nestedResult = parseListItems(nestedUl) } else { console.log('li') } }) } 但是如何填充数组呢？ 结构始终为 [operator[条件/运算符,条件/运算符]]，其中条件/运算符表示条件只是文本，但运算符可以再次为任何深度的 [运算符[条件/运算符,条件/运算符]]。 Ul 具有相应的结构。 document.addEventListener('DOMContentLoaded', () => { const parseListItems = (element) => { const listItems = element.children; const resultArray = []; Array.from(listItems).forEach(item => { if (item.tagName === 'LI') { const nestedUl = item.querySelector('ul'); if (nestedUl) { const nestedResult = parseListItems(nestedUl); resultArray.push([item.firstChild.textContent.trim(), ...nestedResult]); } else { resultArray.push(item.textContent.trim()); } } }); return resultArray; }; const ulElement = document.querySelector('ul'); const parsedList = parseListItems(ulElement); console.log(parsedList); });

CSS Li 背景图像每行文本递减

我正在制定基于 https://codepen.io/chaoticpotato/pen/zYEPRYG 的定价计划。但是，当每个项目符号点的文本超过一行时，它将每行文本稍微移动到

为什么这些嵌套的 ol 项目彼此重叠？

我有一个应该是一个非常正常的嵌套OL，代码基本上是从这里复制粘贴的，并从这个线程中添加了一些小内容，这里有人遇到了与我类似的问题，但没有......

博客中如何自动让H2成为有序列表（ol li）

我想将博客中的标题（H2）设为列表项。标题由段落分隔。我正在使用 Wordpress，在我的博客编辑器中，无法使 H2 成为列表。所以我想要一个 CSS ...

是否有更好的方法将列表分成列？

我尝试将我的列表分成4列，使用bootstrap我使用网格，这样做感觉不合法，有没有更好的方法 这就是我所做的： 我尝试将我的列表分成 4 列，使用 bootstrap 我使用网格，这样做感觉不合法，有没有更好的方法 这就是我所做的： <div class="grid"> <ul class="list-group"> <div class="row"> <div class="col"> <li class="list-group-item">1</li> <li class="list-group-item">2</li> <li class="list-group-item">3</li> </div> <div class="col"> <li class="list-group-item">1</li> <li class="list-group-item">2f</li> <li class="list-group-item">3</li> </div> <div class="col"> <li class="list-group-item">1</li> <li class="list-group-item">2</li> </div> <div class="col"> <li class="list-group-item">1</li> <li class="list-group-item">2</li> </div> </div> </ul> </div> 我希望它在不添加任何 div 标签的情况下中断，有办法吗？ 您可以使用 CSS columns 属性来实现此目的： ul { columns: 4; } ul { columns: 4; } <div class="grid"> <ul class="list-group"> <li class="list-group-item">1</li> <li class="list-group-item">2</li> <li class="list-group-item">3</li> <li class="list-group-item">1</li> <li class="list-group-item">2f</li> <li class="list-group-item">3</li> <li class="list-group-item">1</li> <li class="list-group-item">2</li> <li class="list-group-item">1</li> <li class="list-group-item">2</li> </ul> </div> 请注意，列表项之间也不能有 div。

css，选择上一个锚点

文字1 文字2 文本3&... <ul class="list"> <li><a href="">Text 1</a></li> <li><a href="">Text 2</a></li> <li><a href="" class="selected">Text 3</a></li> </ul> 如何在不添加额外类的情况下选择 Text 2 的锚点？ （并且没有 JavaScript） <style type="text/css"> ul.list li a.selected ******{background-color:#000} </style> 输出： <li><a href="" style="background-color:#000;">Text 2</a></li> 如果没有 JavaScript，您的结果将无法在每个浏览器上始终有效。通过 sitepoint 检查此链接 这是使用 CSS3 完成的方式，Internet Explorer 目前不支持此伪类。 <style type="text/css"> ul.list li:nth-child(2) a { background:#000 } </style> 第n个子选择器可以做到这一点。浏览器支持各不相同。 尝试： ul.list li:nth-child(2) a { background:#000; } 参考：http://reference.sitepoint.com/css/pseudoclass-nthchild 您似乎正在寻找以前的同级选择器，不幸的是它不存在。请参阅这篇文章，了解有关可能性的有用链接。 我认为没有任何方法可以简单地选择第*个子元素。 （firstChild 元素除外，它允许您指定第一个子元素。）但您也可以一致地将编号 ID 分配给 li 元素，例如 <li id="1"><a href="">Text 1</a></li> <li id="2"><a href="">Text 2</a></li> <li id="3"><a href="">Text 3</a></li> 然后您可以使用 id 属性中的值来指定第 *th li 元素。所以你的CSS应该是 ul.list li[id="2"] a { background-color: #000; } 我找到了一个方法，试试这个： .prev_item:has(+ .next_item) { color: red; } 如果它是.next_item之前的兄弟，它会改变.prev_item的颜色；

在 Vue v-for 中跳过空项目和空子项目

我在 Vue.js 中有一个嵌套的 for ... in 循环。我想做的是如果元素的值为空则跳过元素。这是Vue模板代码： 我在 Vue.js 中有一个嵌套的 for ... in 循环。我想做的是如果元素的值为 null 则跳过元素。这是 Vue 模板代码： <ul> <li v-for="item in items" track-by="id"> <ol> <li v-for="child in item.children" track-by="id"></li> </ol> </li> </ul> null 元素可能同时存在于 item 和 item.children 对象中。 例如： var data = { 1: { id: 1, title: "This should be rendered", children: { 100: { id: 100, subtitle: "I am a child" }, 101: null } }, 2: null, 3: { id: 3, title: "Should should be rendered as well", children: {} } }; 使用此数据，data[1].children[101]不应被渲染，如果data[1].children[100]稍后变为空，则应将其从列表中省略。 我无法控制这些数据的结构，所以我必须以这种形式处理它。 一个简单的v-if可能会起作用： <li v-for="item in items" v-if="item !== null" track-by="id"> 尝试一下。如果没有，请执行以下操作： 您可以为此添加一个过滤器（在应用程序实例之前的 main.js 中）： Vue.filter('removeNullProps', function(object) { return _.reject(object, (value) => value === null) }) 然后在模板中： <li v-for="item in items | removeNullProps" track-by="id"> <ol> <li v-for="child in item.children | removeNullProps" track-by="id"></li> </ol> </li> 在 Vue 2 中，过滤器已在 v-for 中被弃用。 现在您应该使用计算属性。下面是演示。 new Vue({ el: '#app', data: { items: [ 'item 1', 'item 2', null, 'item 4', null, 'item 6' ] }, computed: { nonNullItems: function() { return this.items.filter(function(item) { return item !== null; }); } } }) <script src="https://unpkg.com/vue@2"></script> <div id="app"> Using a computed property: <ul> <li v-for="item in nonNullItems"> {{ item }} </li> </ul> <hr> Using v-if: <ul> <li v-for="item in items" v-if="item !== null"> {{ item }} </li> </ul> </div> 只需使用 v-if 即可。但首先，不要使用 track-by="id"，因为有 null 项和 null 子项。您可以在此处查看演示https://jsfiddle.net/13mtm5zo/1/。 也许更好的方法是在渲染之前先处理数据。 我建议您不要在同一元素中使用 v-if 和 v-for。我发现有效且不影响性能的是： <li v-for="(value, key) in row.item.filter(x => x !== null)" :key="key"{{value}}</li> 您只需对正在遍历的数组运行过滤函数即可。这是 C# 中的常见用法，发现在 JavaScript 中也没有什么不同。这基本上会在迭代时跳过空值。 希望这会有所帮助（3年后）。 Vue.Js 风格指南告诉我们： “切勿在与 v-for 相同的元素上使用 v-if。” 如何根据Vue风格指南正确处理v-if和v-for： <ul v-if="shouldShowUsers"> <li v-for="user in users" :key="user.id" > {{ user.name }} </li> </ul> 在此处查看有关如何使用 v-if 处理 v-for 的更多信息：https://v2.vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential 首先，让我们从一般准则开始，因为其他答案中已经建议了：永远不要在同一元素上使用 v-if 和 v-for。 由于这两个指令都控制是否渲染元素，因此将它们一起使用会令人困惑且容易出错。 在 Vue 2 中，v-for 优先于 v-if，但 在 Vue 3 中，反之亦然– 始终避免将它们一起使用。 对于您的问题，如果您有一个列表列表，您实际上希望处理两种空值：空列表和这些列表中的空项。 我们可以通过将多个 v-if 和 v-for 编织在一起来处理这两个问题，两个列表各一对，第三个 v-if 以避免渲染空子列表：<ul> <template v-for="item in Object.values(items)"> <li v-if="item != null" :key="item.id"> {{ `Parent #${item.id}: ${item.title}` }} <ol v-if="item.children != null && Object.values(item.children).length > 0"> <template v-for="child in Object.values(item.children)"> <li v-if="child != null" :key="child.id"> {{ `Child #${child.id}: ${child.subtitle}` }} </li> </template> </ol> </li> </template> </ul> 乍一看这可能有点复杂，但核心是：我们可以解决这个问题，同时避免 v-if 和 v-for 限制，并使用 <template> 元素 作为包装器。 通过在父列表和子列表中使用 <template> 作为列表项的包装，我们可以： 使用 v-for 渲染父列表和子列表中的项目 选择是否使用 v-if 单独渲染每个项目，而不沿途创建一堆空的 <li> 可运行代码片段示例： new Vue({ el: '#app', data() { return { items: { 1: { id: 1, title: "This should be rendered", children: { 100: { id: 100, subtitle: "I am a child" }, 101: null, 102: { id: 102, subtitle: "I am a second child" }, } }, 2: null, // No parent #2 to render 3: { id: 3, title: "Should be rendered as well", children: { 300: { id: 300, subtitle: "I am a child under a different parent" }, } }, 4: { id: 4, title: "Should also be rendered (without children)", children: null }, } } }, }); <script src="https://unpkg.com/vue@2/dist/vue.min.js"></script> <div id="app"> <ul> <template v-for="item in Object.values(items)"> <li v-if="item != null" :key="item.id"> {{ `Parent ${item.id}: ${item.title}` }} <ol v-if="item.children != null && Object.values(item.children).length > 0"> <template v-for="child in Object.values(item.children)"> <li v-if="child != null" :key="child.id"> {{ `Child ${child.id}: ${child.subtitle}` }} </li> </template> </ol> </li> </template> </ul> </div> 使用分层 v-if 和 v-for 与 <template> 来渲染列表是一种很好的方法，可以让您最大限度地控制渲染的内容，同时还有助于避免在同一元素上使用这两个指令的陷阱。

如何将我的有序列表项与 <p> 元素对齐

我发现ol的项目有左边距，但是这是第一行没有左边距，所以这三行不能左对齐。我怎样才能使它们左对齐？ 我发现ol的项目有左边距，但<p>This is first row</p>没有左边距，所以这三行不能左对齐。我怎样才能让它们左对齐？ <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> li.A { list-style-type: decimal; font-weight: bold; margin-bottom:15px; } li.B{ list-style-type:upper-alpha; font-weight:normal; margin-top:4px; margin-bottom:4px; } ol.C { } </style> </head> <body> <form id="form1" runat="server"> <div> <p>This is first row</p> <ol> <li class="A">DIY SMS Export V1.05 has been released <ol class="C"> <li class="B">Add the function to delete sms selected</li> </ol> </li> <li class="A">DIY SMS Export V1.04 has been released <ol class="C"> <li class="B">Add chinese language support</li> </ol> </li> </ol> </div> </form> </body> </html> 您是否尝试过添加CSS： ol{ padding-left:0; list-style-position:inside; } 工作 jsFiddle 看看这个 JS Fiddle：http://jsfiddle.net/BPFQm/1/ 我认为你有两个选择：使用 list-style-position: inside 并设置 padding-left: 0 （示例中的“内部”类）。 （list-style-position 的用法在 MDN 上有解释）。或者您可以操纵 padding-left 直到它与您的段落文本对齐。 其他一些答案建议添加margin-left: 0，但我不确定这是必要的。这在我的小提琴中当然没有必要。 更新：看看我再次制作的JS Fiddle，你会发现这两种方法之间的一个重要区别，当/如果你的列表项跨越多行时，它就会显示出来。如果您使用 list-style-position: inside 那么后续行将与数字/标签齐平；而更改左侧填充会保持标准格式，其中文本在数字/标签的右侧有自己的边距。我想，选择您喜欢的格式。 要将所有内容全部移至左侧，请尝试以下操作： ol, ol li { margin-left:0; padding-left:0; list-style-position:inside; } 默认情况下，所有 ol/ul 标签从左侧都有一些填充。您可以删除该填充然后它就可以工作了。 ol, ul { padding-left: 0; list-style-position: inside; } 检查下面的片段 ol, ul { padding-left: 0; list-style-position: inside; } <ol> <li>list-item</li> <li>list-item</li> <li>list-item</li> <li>list-item</li> <li>list-item</li> </ol> <ul> <li>list-item - 1</li> <li>list-item - 2</li> <li>list-item - 3</li> <li>list-item - 4</li> <li>list-item - 5</li> </ul>

有什么方法可以在有序列表中设置列表类型的样式吗？

我正在使用有序列表 咖啡 茶 牛奶 这导致 有什么办法我...

使用list-style-type: none时删除项目符号的空格

这是我的代码： li.title { 列表样式类型：无； 左边距：0； 左填充：0； } 标题 一个 两个<... 这是我的代码： li.title { list-style-type: none; margin-left: 0; padding-left: 0; } <ul> <li class="title">Title</li> <li>one</li> <li>two</li> <li>three</li> </ul> 如您所见，“标题”文本之前有一个空格，其中缺少项目符号。我需要删除这个空格，换句话说，将“标题”与列表的左侧对齐。使用list-style-type: none时怎么办？ 使用list-style-position:inside li.title { list-style-type: none; margin-left: 0; padding-left: 0; } ul { list-style-position: inside } <ul> <li class="title">Title</li> <li>one</li> <li>two</li> <li>three</li> </ul> 您可以使用否定margin-left： li.title { list-style-type: none; margin-left: -1em; } <ul> <li class="title">Title</li> <li>one</li> <li>two<br />linebreak here</li> <li>three</li> </ul> 或者，您也可以使用 transform: li.title { list-style-type: none; transform: translateX(-1em); } <ul> <li class="title">Title</li> <li>one</li> <li>two<br />linebreak here</li> <li>three</li> </ul>

我可以减少li数字和内容之间的间距吗？

我想减少序数和内容之间的间距，即我想更改为： 1. 富 到： 1. 富 这可能吗？ ...内容

如何将无序列表居中？

我需要将未知宽度的无序列表居中，同时仍然保持列表项左对齐。 获得与此相同的结果： 超文本标记语言 我需要将未知宽度的无序列表居中，同时仍保持列表项左对齐。 达到与此相同的结果： HTML <div> <ul> <li></li> <li></li> <li></li> </ul> </div> CSS div { text-align: center; } ul { display: inline-block; text-align: left; } 除了我的 <ul> 没有父级 div。 ul { margin: 0 auto; } 不起作用，因为我没有固定的宽度。 ul { text-align: center; } 不起作用，因为列表项将不再保持对齐。那么我怎样才能将这个 <ul> 居中，同时保持 <li> 左对齐（没有父 div 包装器）？ <ul> <li></li> <li></li> <li></li> </ul> 编辑：也许我的措辞不是最好的...第一段代码已经可以工作了...我需要的是在不使用<div>包装器的情况下完成它，如果这当然是可能的话。漂浮技巧？伪元素技巧？一定有办法的。 ul { display: table; margin: 0 auto; } <html> <body> <ul> <li>56456456</li> <li>4564564564564649999999999999999999999999999996</li> <li>45645</li> </ul> </body> </html> 列表样式位置：内部 使用list-style-position:inside： ul { text-align: center; list-style-position: inside; } <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> 假设列表是： <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> 对于这个例子。 如果我理解正确，您希望列表项位于屏幕中间，但您希望这些列表项中的文本位于列表项本身左侧的中心。这样做实际上非常简单。你只需要一些CSS： ul { display: table; margin: 0 auto; text-align: left; } 而且它有效！这就是正在发生的事情。首先，我们说我们只想影响无序列表。然后，我们使用 Rafael Herscovici 的技巧将列表项居中。最后，我们说将文本与列表项的左侧对齐。 要使无序列表居中对齐，您需要使用 CSS 文本对齐属性。除此之外，您还需要将无序列表放入 div 元素内。 现在，将样式添加到 div 类中，并使用以 center 为值的 text-align 属性。 请参阅下面的示例。 <style> .myDivElement{ text-align:center; } .myDivElement ul li{ display:inline; } </style> <div class="myDivElement"> <ul> <li>Home</li> <li>About</li> <li>Gallery</li> <li>Contact</li> </ul> </div> 这里是参考网站居中对齐无序列表 http://jsfiddle.net/psbu2/3/ 如果您可以使用自己的列表项目符号 试试这个： <html> <head> <style type="text/css"> ul { margin:0; padding:0; text-align: center; list-style:none; } ul li { padding: 2px 5px; } ul li:before { content:url(http://www.un.org/en/oaj/unjs/efiling/added/images/bullet-list-icon-blue.jpg);; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html> 从你的帖子中，我了解到你无法将宽度设置为你的li。 这个怎么样？ ul { border:2px solid red; display:inline-block; } li { display:inline; padding:0 30%; /* try adjusting the side % to give a feel of center aligned.*/ } <ul> <li>Hello</li> <li>Hezkdhkfskdhfkllo</li> <li>Hello</li> </ul> 这是一个演示。 http://codepen.io/anon/pen/HhBwx 当文本居中对齐时，点会卡在左侧。您可以从脚本中删除“ul”。 示例： <!doctype html> <html> <style> div.list { text-align: center; } </style> <body> <div class="list"> <li>Hi</li> <li>Hi</li> <li>Hi</li> </div> </body> </html> 通过使用 bootstrap，您可以添加类容器以使其居中。对我来说效果很好

如何使无序列表的项目符号与文本居中？

当我尝试将 居中时，文本位于 中心，但项目符号点仍保留在页面的最左侧。有没有办法让项目符号点与文本保持一致 当我尝试将 <ul> 居中时，文本位于 <li> 中心，但项目符号点仍保留在页面的最左侧。有没有办法让项目符号点在文本居中时与文本保持一致？ #abc { text-align: center; } <div id="section1"> <div id="abc"> <ul> <li>one</li> <li>two</li> <li>three</li> </ul> <div/> <div/> 将 list-style-position: inside 添加到 ul 元素。 （示例） list-style-position属性的默认值为outside。 ul { text-align: center; list-style-position: inside; } <ul> <li>one</li> <li>two</li> <li>three</li> </ul> 另一个选项（产生略有不同的结果）是将整个 ul 元素居中： .parent { text-align: center; } .parent > ul { display: inline-block; } <div class="parent"> <ul> <li>one</li> <li>two</li> <li>three</li> </ul> </div> 您可以使用 list-style-position: inside; 元素上的 ul 来做到这一点： ul { list-style-position: inside; } 查看工作小提琴 TL；博士 ul { padding-left: 0; list-style-position: inside; } 说明： 第一个属性 padding-left: 0 清除 ul 元素的默认填充/间距，而 list-style-position: inside 使 li 的点/项目符号像普通文本一样对齐。 所以这段代码 <p>The ul element</p> <ul> asdfas <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> 没有任何 CSS 会给我们这个： 但是如果我们在顶部添加CSS，就会得到这个： 我今天找到了答案。也许为时已晚，但我仍然认为这是一个更好的选择。检查这个 https://jsfiddle.net/Amar_newDev/khb2oyru/5/ 尝试更改 CSS 代码：<ul> max-width:1%; margin:auto; text-align:left; </ul> 最大宽度：80% 或类似的值。 尝试一下你可能会发现新的东西。 具体操作方法如下。 首先，这样装饰你的列表： <div class="p"> <div class="text-bullet-centered">&#8277;</div> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div> <div class="p"> <div class="text-bullet-centered">&#8277;</div> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div> 添加此 CSS： .p { position: relative; margin: 20px; margin-left: 50px; } .text-bullet-centered { position: absolute; left: -40px; top: 50%; transform: translate(0%,-50%); font-weight: bold; } 瞧，它有效了。调整窗口大小，看看它是否确实有效。 作为奖励，您可以轻松更改项目符号的字体和颜色，这对于普通列表来说很难做到。 .p { position: relative; margin: 20px; margin-left: 50px; } .text-bullet-centered { position: absolute; left: -40px; top: 50%; transform: translate(0%, -50%); font-weight: bold; } <div class="p"> <div class="text-bullet-centered">&#8277;</div> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div> <div class="p"> <div class="text-bullet-centered">&#8277;</div> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>