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

Question

3

你好，我有一个包含超链接的 div，其 display 属性为 block。问题是当点击超链接时，超链接的长度等于 div 的宽度。我该如何使超链接的点击长度仅等于超链接文本的长度，而不需要为每个链接指定宽度？这里是 JSFiddle

- Zo Has

你的链接需要display:block属性是有什么原因吗？ - Emmett

Emmett，我想避免在我的标记中使用</br>标签，以便使每个链接都在新行上。你有什么替代方法吗？ - Zo Has

5个回答

1

将链接样式设置为display:inline-block;（在较旧的IE6中不支持），或使用float:left;或float:right;进行浮动。

- olemarius

谢谢Olemarius先生。您知道一种在不使用display:block和</br>标记的情况下使每个超链接都跟随新行的方法吗？ - Zo Has

我认为你可以使用clear:both;或clear:left/right（取决于你想要清除元素的哪一侧）来解决这个问题。不过，对于浮动的元素是否有效并不完全确定。 - olemarius

1

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

只需删除该声明，您的问题就会消失。

- Valentin Flachsel

嗨，FreekOne，我们可不可以不使用</br>标签，使每个链接都出现在新行上？ - Zo Has

@Damien：Steve比我先回答了 :) 不过我不确定使用<br>标签有什么问题... - Valentin Flachsel

有人告诉我这看起来不够专业，所以我试着用CSS来做，但那是最简单的方法。感谢你们的回复。 - Zo Has

@Damien：很高兴能帮忙。我猜测同一人使用DIV元素来模拟表格数据，因为使用表格也被认为是“不专业的”。建议：如果它是有效的标记并且能够完成工作，请使用它。这会使你的生活变得更轻松;) - Valentin Flachsel

0

宽度：自适应？

或者尝试显示：内联；

在链接上

这样就不会获取div的宽度了

- Breezer

0

你是指像这样的东西吗？

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

- scheffield

不，那会移除下划线。他想要的是链接的点击框宽度与链接文本相同。 - Dan D.

Sheffield先生，请检查我的jsfiddle链接。当您单击并按住链接时，您会发现宽度设置为div的宽度。 - Zo Has

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ben · Accepted Answer

使用

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

float属性允许链接的大小发生变化，而clear属性可以防止链接在同一行上。

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

编辑

由于您的要求，这里提供一个小教程：

有两种类型的元素：内联元素和块级元素。内联元素显示在一行中，没有换行符。块级元素占据整个行并移动到下一行。

内联元素无法设置其宽度或高度。块级元素可以设置。

<a>是一个内联元素。通过将其显示设置为块级元素，您告诉它每次都要换行。

float属性使元素具有内联行为，因此它们会挤在一起并流到下一行。 float还允许您样式化元素的宽度/高度。它是两者之间的混合体。

清除属性停止内联浮动并返回正常的块级行为（每次都新建一行）。

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

另一种解决方案涉及display:inline-block，但是这在几个浏览器中不受支持，因此不被鼓励使用（尽管我认为它非常方便）。