6

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

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

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

4

4 回答 4

12

添加该空间的是浏览器默认样式，只需使用 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 */
于 2013-02-28T03:17:51.010 回答
1

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

你必须添加这个：

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

对于这个问题。

于 2013-02-28T03:38:18.740 回答
1

这些天我最近发现的一个更好的方法是<ul>将display: contents;. 因此 css 应该看起来像这样：

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

ul > li {

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

这应该可以解决问题。

于 2018-12-14T11:05:02.413 回答
0

添加

margin:auto; float:none; display block;到您的 ol 元素的 css 中，这将删除填充并在中心对齐元素

于 2013-02-28T03:17:57.370 回答