为什么我的链接是无限宽度？ [英] Why has my link an infinite width?

问题描述

我用xml做一些东西，但链接有一个无限宽度。
Jsfiddle （将鼠标悬停在链接标题上，您会看到）

I am making something with xml but the links have an infinite width. Jsfiddle (hover over the link discription and you will see it)

我的xml连结代码

< l> tag是链接。

<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它的工作，但是当我把它的汽车它不是所以可以有人帮助我解决这个问题吗？

When I specify a width like 200px it works but when I put it to auto it doesn't so can somebody help me with solving this problem?

我有Jquery工作在页面上如果我需要解决问题的Jquery是没有问题。

I have Jquery working on the page so if I need to solve the problem with Jquery that is no problem.

推荐答案

这是由于

Display: block;

在CSS

：

如果您希望CSS本身使用这一切，请使用此方法（如果您不想在HTML中使用
）

If you wish to do all by CSS itself use this (just in-case if you don't want to use
in 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:" ";
}

这篇关于为什么我的链接是无限宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！