停止继承div的宽度的超链接？

Question

嗨我在div里面有一些带有display：block的超链接。问题是单击时超链接的长度等于div的宽度。如何使超链接的单击长度仅等于超链接的文本而不指定每个链接的宽度？ JSFiddle here

Answer 1

使用

#links a {clear:left;float:left}

float将允许对链接进行调整，clear将阻止链接位于同一行。

根据您的设计，您可能需要在clear:left容器中添加#links。

修改

你提出的一个小教程：

有两种类型的元素，内联和块。内联线显示没有中断。块元素占据整行并移动到下一行。

内联元素的宽度或高度不能设置样式。块可以。

<a>是一个内联元素。通过将其显示设置为阻止，您可以告诉它每次都创建一个新行。

float给出元素内联行为，使它们在彼此旁边碰撞并流到下一行。 float还允许您设置元素的宽度/高度。这是两者之间的混合。

clear属性会停止内联浮动并返回到正常的阻止行为（每次都是新行）。

您不需要同时display:block和float:。

另一个解决方案涉及display:inline-block，但在多个浏览器中不支持此功能，因此不鼓励（尽管我发现它非常方便）。

Answer 2

设置显示的链接样式：inline-block; （IE6中不支持）或浮动浮动：左;或浮动：正确;

Answer 3

display: block;是使链接元素扩展到其父宽度的原因。默认情况下，链接元素是内嵌元素，而不是块元素。

只需删除该声明即可解决您的问题。

JSFiddle example

Answer 4

你的意思是这样的：

<a href="example.com" style="text-decoration: none;">Foo</a>

Answer 5

宽度：自动

或尝试 显示：内联;

链接

它不应该得到divs宽度