从无序列表中删除填充 [英] Remove padding from unordered list

问题描述

有些事情困扰了我很多年.如果您查看此小提琴

Something has bugged me for years. If you look at this fiddle

您将看到一个简单的无序列表，其中在a元素上有一些填充，并使用背景色来创建一个框.

you'll see a simple unordered list with some padding on the a element and a background colour to create a box.

列表中的每个项目之间都有空白.如何摆脱它，使盒子水平接触?

There is white space between each item in the list. How can you get rid of it so the boxes are touching horizontally?

HTML是:

<div id="dvLinks">
    <ul>
        <li><a href="#">One</a>
        </li>
        <li><a href="#">Two</a>
        </li>
        <li><a href="#">Three</a>
        </li>
    </ul>
</div>

css是:

#dvLinks ul {
    margin: 0;
    padding: 0;
    list - style - type: none;
}
#dvLinks ul li {
    display: inline;
}
#dvLinks ul li a {
    text - decoration: none;
    padding: .1em 1em;
    color: #000;
    background-color: # 33EEDD;
}

推荐答案

这很简单:

CSS

#dvLinks ul li { display: table-cell; }

---

结果

---

RESULTS

这篇关于从无序列表中删除填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！