Question

所以我有一个代码，它将html的默认边距和填充设置为0

CSS：

body,html {
    padding: 0; margin: 0;
    width:100%;font-family:arial;
}
#headingUl li{
    list-style-type:none;
}
    </style>

HTML：

<div id="heading">
    <ul id="headingUl">
        <li>a</li>
        <li>b</li>
        <li>b</li>
    </ul>   
</div

...但列表仍有左边距。

Answer 1

ul, ol {
    list-style-type:none;
    padding: 0;
    margin: 0;
}

浏览器设置默认的ul，ol填充。你需要覆盖它。

您可以将其重置为所有列表，以免再次担心：

public static class program
{
    static void Main(string[] args)
    {

        try
        {
            var table = new DataTable();
            table.Columns.Add("year", typeof(string));
            table.Columns.Add("month", typeof(string));
            table.Columns.Add("period", typeof(string));
            table.Columns.Add("amount", typeof(decimal));

            var row = table.NewRow();
            table.Rows.Add(row);
            row["year"] = "2015";
            row["month"] = "Jan";
            row["period"] = "Period1";
            row["amount"] = 100;


            row = table.NewRow();
            table.Rows.Add(row);
            row["year"] = "2015";
            row["month"] = "Jan";
            row["period"] = "Period1";
            row["amount"] = 50;

            row = table.NewRow();
            table.Rows.Add(row);
            row["year"] = "2016";
            row["month"] = "Fed";
            row["period"] = "Period2";
            row["amount"] = 5.55;


            var result = (from r in table.AsEnumerable()
                          group r by new
                          {
                              Year = r.Field<string>("year"),
                              Month = r.Field<string>("month"),
                              Period = r.Field<string>("period"),
                          } into grp
                          select new {
                              grp.Key,
                              total = grp.Sum(p=> p.Field<decimal>("amount"))
                          });


            foreach(var grp in result)
            {
                Console.WriteLine("{0} {1} {2} = {3}", grp.Key.Year, grp.Key.Month, grp.Key.Period, grp.total); 
            }


        }
        catch (Exception ex)
        {
            Console.WriteLine(ex.Message);
        }

    }

}

Answer 2

为了避免这种行为，您应该重置自动样式。

*{
   margin:0px;
   padding: 0px;
 }

Answer 3

正如@Nenad Vracar所说，ul元素的默认padding-left或margin-left值设置为40px。

请参阅此处的文档： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation

你需要像这样覆盖它：

#headingUl { padding-left:0; margin-left: 0; }

在Internet Explorer和Opera中，通过设置a缩进列表元素上的左边距为40像素。 Gecko，另一方面手，为元素设置40像素的左边距

Answer 4

您已将padding:0;和margin:0;分配给html容器和body容器，这不会影响内部元素，因此您需要在样式中添加以下内容：

ul {
   padding:0;
   margin:0;
}

Answer 5

我建议您使用Eric Meyer创建的程序硬重置所有属性 - CSS重置。

http://meyerweb.com/eric/tools/css/reset/

快速摆脱下面无用的填充使用代码

* {
    padding: 0;
    margin: 0;
}

HTML列表不遵循CSS边距规则

5 个答案: