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;
}

当我指定像{200}这样的width时，它会起作用，但是当我把它设置为自动时它没有帮助我解决这个问题吗？

我让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:" "; }

Answer 2

如果你拿出

，这是固定的

display:block;

并添加

<br/>

链接标记后

Answer 3

您可以这样使用：CSS： Demo

l{
    color:#222;
    font-size:18px;
    font-style: italic; 
    transition:all 0.4s;
    -webkit-transition:all 0.5s;
    text-decoration:none;
    width:auto;   
}

HTML：

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

Answer 4

实际上，有很多方法可以解决这个问题。

Html解决方案： demo

//........
<link>
        <table>
            <tr><td><b>link 1</b><l href="#">description</l></td></tr>
            <tr><td><b>link 2</b> <l href="#">description</l></td></tr>
        </table>
</link>
//.....

Css解决方案： demo

l {
   //........
   display:table;
   //.......
}

Answer 5

块级元素占用容器的宽度。将它们设置为内联块并使用列表元素来包含列表项

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

5 个答案: