blocks|key|1964320|text|这是浏览器的默认样式添加的空间，只需使用CSS重置来重置所有浏览器的默认样式。大多数块元素都有一些默认的边距/填充。即使是<body>元素在默认情况下也有8px的边距。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1964321|这是Eric+Meyer重置的链接：http://meyerweb.com/eric/tools/css/reset/|1964322|为了自己看看，请添加：|1964323|ol+{
margin:+0;
padding:+0;
}
/*+This+would+be+declared+in+the+above+reset+*/|code-block|syntax|javascript|1964324|entityMap|0|LINK|mutability|MUTABLE|url|http://meyerweb.com/eric/tools/css/reset/^0|1P|6|0|I|15|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@$9|10|A|11|1|12]]|E|$]]|$1|H|3|I|5|6|7|13|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|14|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

It's the browsers default styling that's adding that space, just use a CSS reset to reset all of the browsers default styles. Most block elements have some default margin/padding .. even the <code>&lt;body&gt;</code> element has 8px of margin applied to it by default.

Here is a link to Eric Meyer's reset: <a href="http://meyerweb.com/eric/tools/css/reset/" rel="noreferrer">http://meyerweb.com/eric/tools/css/reset/</a>

Just to see for yourself, add:

<pre><code>ol {
margin: 0;
padding: 0;
}
/* This would be declared in the above reset */
</code></pre>

blocks|key|1964344|text|添加|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1964345|margin:auto;+float:none;+display+block;到ol元素的css，这将删除填充并将元素居中对齐。|offset|length|style|CODE|1964346|entityMap^0|0|0|13|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

add 

<code>margin:auto;
float:none;
display block;</code> to your css for the ol element, this will remove the padding and align the elements in the centre

blocks|key|5315792|text|在开始使用CSS之前，请确保添加浏览器重置样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5315793|您必须添加以下内容：|5315794|ol,+li+{
++margin:+0px;
++padding:+0px;
}|code-block|syntax|javascript|5315795|关于这个问题。|5315796|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Make sure to add browser reset styles before you start working with CSS.

You have to add this:

<pre><code>ol, li {
 margin: 0px;
 padding: 0px;
}
</code></pre>

for this question.

blocks|key|744661|text|最近我发现了一个更好的方法，就是将<ul>设置为display:+contents;。因此，css应该看起来像这样：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|744662|ul+{
+++++++list-style-type:+none;
+++++++display:+contents;
+++}

ul+>+li+{

++++++++padding:+0;
++++++++margin:+0;+
++++++++text-align:+center;
+++}|code-block|syntax|javascript|744663|这应该能起到作用。|744664|entityMap^0|H|4|O|I|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

A better way to this these days I found recently is to set the <code>&lt;ul&gt;</code> to <code>display: contents;</code>. Thus the css should look something like this:

<pre><code>ul {
 list-style-type: none;
 display: contents;
 }

ul &gt; li {

 padding: 0;
 margin: 0; 
 text-align: center;
 }
</code></pre>

This should do the trick.

On <a href="http://www.w3schools.com/cssref/playit.asp?filename=playcss_ol_list-style-type&amp;preval=none" rel="noreferrer">http://www.w3schools.com/cssref/playit.asp?filename=playcss_ol_list-style-type&amp;preval=none</a>, a nice overview is provided for the different <code>list-style-type</code> values.

However, for the value <code>none</code>, it still reserves some horizontal space for the empty list symbol. Is there a way to remove this horizontal spacing, so that the text actually moves to the left as if it was no list? I would like to use <code>text-align:center</code> on the list items, and this horizontal spacing makes them not really centered. And I need to use <code>&lt;ul&gt;</code> because the CMS brings it in that way.

Basically, by default <code>list-style-type:none</code> does a <code>visibility:hidden</code> on the bullets, while I would like to achieve <code>display:none</code> on the bullets instead. What would be the proper way to do this?

remove horizontal spacing in <ul> with list-style-type:none

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

在上，为不同的list-style-type值提供了一个很好的概述。但是，对于值none，它仍然为空列表符号保留了一些水平空间。有没有一种方法可以删除这个水平间距，这样文本实际上就像没有列表一样向左移动？我想在列表项上使用text-align:center，这种水平间距使它们不能真正居中。我需要使用<ul>，因为内容管...

问使用list-style-type删除<ul>中的水平间距:无
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用list-style-type删除<ul>中的水平间距:无EN