css - 这个a标签为什么不能充满这个div？

Question

鼠标放到a标签的左边不能选中a标签 放到右边可以 我设置了宽度100%为什么还不行？ 怎样才能让它的宽度充满这个p呢？

<p style="width: 20%;height: 200px;background-color: #DDDDEF">
    <ul style="width: 100%;">
        <li style="width: 100%;display: inline-block;"><a href="" style="display: inline-block;width: 100%;">aaa</a></li>
    </ul>
</p>

Answer 1

因为ul标签有默认的40px的padding-left，在样式中去除就行
一般在样式表最开始会去除所有默认元素的样式，最简单粗暴的方式如下

*{
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
    text-decoration: none;
}

Answer 2

height呢？ 给a设置一个backgounrd－color就明显了。 没高度。 另外，哥，你这样写css不费脑啊？为了方便实践，也应该写成<style></style>的形式吧！

Answer 3

内联标签，本来就不会满

Answer 4

你可以用a包住p

Answer 5

display:block

Answer 6

少年看图，ul有默认的浏览器样式padding，这种时候需要去掉默认样式。

ul加上padding:0;

Answer 7

去掉ul的padding值 这些都应该在css中一开始就重置的

Answer 8

a标签应该是有默认padding的，去掉就可以了。
然后，行内元素一般没这么搞的。。一般都改成块级元素display:block。