停止超链接继承div的宽度？ [英] Stop hyperlink inheriting div's width?

问题描述

我有一些超链接在一个div与显示：块。问题是，点击的超链接长度等于div的宽度。如何使超链接的点击长度等于超链接的文本，而不必为每个链接指定宽度？
JSFiddle这里

Hi I have some hyperlinks inside a div with display:block. Problem is that the hyperlinks length when clicked is equal to the div's width. How do I make the hyperlink's clicked length equal to the text of the hyperlink only without specifying width for each link ? JSFiddle here

推荐答案

使用

#links a {clear：left; float：left} $ c>

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

float 将允许链接大小设置，

The float will allow the link to be sized, and the clear will prevent the links from being on the same line.

您可能需要添加 clear：left

You may need to add a clear:left to the #links container depending on your design.

EDIT

自从您问以下的一个教程：

A little tutorial since you asked:

有两种类型的元素，inline和block。内联的显示在一行没有休息。块元素占据整行并移动到下一个元素。

There are two types of elements, inline and block. Inline ones show in a line with no breaks. Block elements take up the whole line and move to the next one.

内置元素不能有宽度或高度风格。块可以。

Inline elements can't have their width or height styled. Blocks can.

< a> 是一个内联元素。通过将其显示设置为块，您可以指定每次都创建一个新行。

<a> is an inline element. By setting its display to block, you tell it to make a new line every time.

float 行为，所以他们碰到彼此，并流到下一行。 float 也允许你设置元素的宽度/高度。

float gives elements inline behavior so they bump up next to eachother and flow over onto the next line. float also allows you to style the width/height of the element. It's sort of a mix between the two.

clear属性停止内联浮动，并回到正常的块行为（每次都有新行）。

The clear attribute stops the inline floating and goes back to normal block behavior (new lines every time).

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

另一个解决方案会涉及 display：inline-block ，但是这在几个浏览器中不受支持，因此鼓励（虽然我觉得很方便）。

Another solution would involve display:inline-block, but this is not supported in several browsers so isn't encouraged (although I find it pretty handy).

这篇关于停止超链接继承div的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！