Html 如何使用css设置锚标记文本宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1103714/
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
how to set anchor tag text width using css?
提问by TigerTiger
I have html and css as below -
我有如下的 html 和 css -
.title {
display: block; background-color: red;
}
<a href="#">
<span class="title">Text</span>
</a>
I could see that the SPAN spans to the 100% of the available width (because of display: block). Like below
我可以看到 SPAN 跨越了可用宽度的 100%（因为display: block）。像下面
|----------------------------------------------------|
| Text |
|----------------------------------------------------|
In Firefox, I can click anywhere in the above box, and it takes me to the linked page. However, In IE (IE 7) I get the cursor as hand only when I hover over "Text" text only.
在 Firefox 中，我可以单击上面框中的任意位置，然后它会将我带到链接页面。但是，在 IE (IE 7) 中，仅当我将鼠标悬停在“文本”文本上时，我才会将光标设为手。
What hack I'll have to do to make it work (same as it does in FF) in IE as well?
我还必须做什么才能使其在 IE 中工作（与 FF 中的相同）？
I tried placing the anchor tag itself (not just the text) in span but it won't work.
我尝试将锚标签本身（不仅仅是文本）放在 span 中，但它不起作用。
Thanks.
谢谢。
回答by Quentin
Style the anchor and remove the span.
设置锚点样式并移除跨度。
(The problem is due to how some browsers handle elements that are display: blockinside elements that are display: inline. You can work around it by styling both the anchor and the span, but the span appears redundant in this example)
（这个问题是由于某些浏览器如何处理那些元素display: block是里面的元素display: inline，你可以通过两种样式的锚和跨度解决它，但跨度出现在这个例子中冗余）
回答by Rik Heywood
for your <a>tag, make the style "display: block; width:100%;"
为您的<a>标签设置样式“显示：块；宽度：100%；”
回答by Alex Morales
Definitely, you need to remove the span and apply that class to the anchor tag. I don't think you need to set the width to 100% explicitly, but I could be wrong.
当然，您需要删除跨度并将该类应用于锚标记。我认为您不需要明确地将宽度设置为 100%，但我可能是错的。
回答by corymathews
Remove the extra span and place that title class on the link itself. Then add width:100%; to the css.
删除额外的跨度并将该标题类放在链接本身上。然后添加宽度：100%；到CSS。
Less markup is most often better, thats why you should remove the extra span.
更少的标记通常更好，这就是为什么你应该删除额外的跨度。
回答by dipen
you can also using margin or padding
您还可以使用边距或填充
回答by Himani
Give a style to anchor of display:blockand max-width:30px !important;max-width size can be any
给锚定一个样式display:block，max-width:30px !important;最大宽度大小可以是任意的
li a {
display: block;
height: 30px;
max-width: 30px !important;
}
