Question

在http://www.w3schools.com/cssref/playit.asp?filename=playcss_ol_list-style-type&preval=none上，为不同的list-style-type值提供了一个很好的概述。

但是，对于值none，它仍为空列表符号保留一些水平空间。有没有办法删除这个水平间距，以便文本实际上向左移动，就好像它没有列表？我想在列表项上使用text-align:center，这个水平间距使它们不能真正居中。我需要使用<ul>，因为CMS会以这种方式带来它。

基本上，默认情况下list-style-type:none会在子弹上执行visibility:hidden，而我希望在子弹上实现display:none。这样做的正确方法是什么？

Answer 1

这是添加该空间的浏览器默认样式，只需使用CSS重置重置所有浏览器默认样式。大多数块元素都有一些默认的边距/填充..即使<body>元素默认也应用了8px的边距。

以下是Eric Meyer重置的链接：http://meyerweb.com/eric/tools/css/reset/

为了亲眼看看，请添加：

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

Answer 2

确保在开始使用CSS之前添加浏览器重置样式。

你必须添加：

ol, li {
  margin: 0px;
  padding: 0px;
}

这个问题。

Answer 3

添加

margin:auto; float:none; display block;给你的css获取ol元素，这将删除填充并对齐中心的元素

Answer 4

我最近发现的最近一种更好的方法是将<ul>设置为display: contents;。因此，css应该如下所示：

ul {
       list-style-type: none;
       display: contents;
   }

ul > li {

        padding: 0;
        margin: 0; 
        text-align: center;
   }

这应该可以解决问题。

使用list-style-type删除<ul>中的水平间距：无</ul>

4 个答案: