<a> tag in html</a>的宽度

时间:2010-01-20 07:00:46

标签: html

是否可以在html中为<a>标记设置一些宽度? 如果是的话是什么方式,如果没有任何工作?

4 个答案:

答案 0 :(得分:35)

您可以将其重新定义为块元素,然后将宽度设置为:a{display:block;width:400px}

编辑:但是,在这种情况下,它将从一个新行开始,下一段文本也将在一个新行中。解决问题的方法是inline-block显示模式,但是旧版本的IE和FF再次出现问题(参见此处:http://caniuse.com/#search=inline-block

答案 1 :(得分:4)

css width属性不会影响<a><span>等内联元素。要使用width等块级属性,您必须使用display:block将元素声明为块级元素:

<a style="display:block;width:200px">Your link</a>

答案 2 :(得分:1)

如果你不喜欢display:blockdisplay:inline-block你可以使用填充

答案 3 :(得分:0)

正如其他人所说,a元素是一个内联元素,因此对宽度或高度不感兴趣。它只查找内容并使其自身与内容所需的一样大。

但是,根据您尝试查看的内容,您可以使用paddingmargin更改与其他内嵌元素的距离。例如<a style="padding: 0 5px;">some text</a>在文本的左侧和右侧添加5px填充。但同样,实际大小将基于文本大小。

一种不同的方法,更多是一种黑客攻击,如果可能的话应该避免这种方法,如下:

<a style="background: red; padding-right: 100px;">
    <span style="position: absolute;">Some text</span>
</a>

这会在文本的右侧中添加100px 的填充,但是通过将文本的位置设置为绝对,该文本呈现“高于”其余部分并被忽略对于所有额外的大小计算,因此a元素基本上没有直接内容,因此宽度为零,右侧添加了100px的填充。所以元素正好是100px宽。并且在将其设置为绝对之后不修改跨度的位置,它将保持在没有绝对的情况下的位置,因此它看起来是相同的。