html 中 <a> 标签的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2099560/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
width for <a> tag in html
提问by Anand Sunderraman
Is it possible to set some width to the <a>tag in html ?
If yes what is the way, if no is there any work around ??
是否可以<a>在 html 中为标签设置一些宽度？如果是，有什么办法，如果没有，有什么解决办法吗？
回答by naivists
You can redefine it as a block element and then set width to it: a{display:block;width:400px}.
您可以将其重新定义为块元素，然后为其设置宽度：a{display:block;width:400px}。
EDIT: However, in this case it will start on a new line and the next piece of text will also be in a new line. What solves the problem, is inline-blockdisplay mode, but this again has problems with older versions of IE and FF (see here: http://caniuse.com/#search=inline-block)
编辑：但是，在这种情况下，它将从新行开始，下一段文本也将在新行中。解决问题的是inline-block显示模式，但这在旧版本的 IE 和 FF 中再次出现问题（请参阅此处：http: //caniuse.com/#search=inline-block）
回答by zombat
The css widthproperty does not affect inline elements such as <a>or <span>. In order to use block-level properties like width, you'll have to declare your element as a block-level element, using display:block:
csswidth属性不影响内联元素，例如<a>或<span>。为了使用像 那样的块级属性width，您必须使用以下命令将您的元素声明为块级元素display:block：
<a style="display:block;width:200px">Your link</a>
回答by Med
If You didn't Like display:blockor display:inline-blockYou Can Use The Padding
如果你不喜欢display:block或者display:inline-block你可以使用填充
回答by poke
As others said, the aelement is an inline element and as such not interested in widths or heights. It only looks for the content and makes itself as big as the content requires it to be.
正如其他人所说，该a元素是一个内联元素，因此对宽度或高度不感兴趣。它只寻找内容，并使自己像内容要求的那样大。
However, depending on what you try to make it look, you can use paddingand marginto change the distance to other in-line elements. For example <a style="padding: 0 5px;">some text</a>adds a 5px padding to the left and the right of the text. But again, the actual size will be based on the text size.
但是，根据您尝试使它看起来的内容，您可以使用padding并margin更改与其他内嵌元素的距离。例如<a style="padding: 0 5px;">some text</a>，在文本的左侧和右侧添加 5px 填充。但同样，实际大小将基于文本大小。
A different approach, which is more a hack, and as such should be avoided if possible, would be the following:
一种不同的方法，更像是一种黑客行为，因此应尽可能避免，如下所示：
<a style="background: red; padding-right: 100px;">
<span style="position: absolute;">Some text</span>
</a>
This adds a padding of 100px to the rightof the text, but by setting the text's position to absolute, that text renders "above" the rest and is ignored for all additional size calculations, so the aelement basically has no direct content and as such a width of zero with an added padding of 100px to the right. So the element is exactly 100px wide. And by not modifying the span's positions after setting it to absolute, it will stay where it would have been without the absolute, so it looks the same.
这会在文本右侧添加 100px 的填充，但是通过将文本的位置设置为absolute，该文本呈现“高于”其余部分，并且在所有其他大小计算中被忽略，因此该a元素基本上没有直接内容等宽度为零，并在右侧添加 100 像素的填充。所以元素正好是 100px 宽。并且通过在将其设置为absolute后不修改 span 的位置，它将保持在没有absolute 时的位置，因此看起来相同。
