为什么我的链接宽度无限？

Question

我正在用xml制作一些东西,但链接的宽度是无限的. Jsfiddle(将鼠标悬停在链接描述上,你会看到它)

我的xml链接代码

该<l>标签的链接.

<b>link 1</b><l href="#">description</l>

css代码

l{
  color:#222;
  font-size:18;
  font-style: italic;
  display:block;
  transition:all 0.4s;
  -webkit-transition:all 0.5s;
  text-decoration:none;
  width:auto;
}
l:hover{
  cursor:pointer;
  color:blue;
} 

当我指定width类似200px它可以工作,但当我把它用于自动它不是这样有人可以帮助我解决这个问题？

我让Jquery在页面上工作,所以如果我需要用Jquery来解决这个问题没问题.

Answer 1

这是因为

Display: block;

在CSS中

编辑:

如果您希望通过CSS本身完成所有操作,请使用此功能(如果您不想
在HTML中使用,请使用此功能)

l{
    color:#222;
    font-size:18;
    font-style: italic;
    transition:all 0.4s;
    -webkit-transition:all 0.5s;
    text-decoration:none;
    width:auto;
}
l:before, l:after{
    display:block;
    content:" ";
}