<a> 元素划分的限制长度（div 宽度）答案

【问题标题】：Limiting length(div width) of an <a> element division<a> 元素划分的限制长度（div 宽度）
【发布时间】：2014-01-04 20:22:28
【问题描述】：

有没有办法限制“a”元素的宽度？我使用“a”元素作为切换按钮，但“a”元素右侧的空白区域仍然是指针光标样式，这是我不想要的。这是一些代码：

HTML：

<a class="ChartLink" id="CapstoneLink"> Global Leadership </a>

CSS：

.ChartLink, a {
padding: 10px;
cursor: pointer; }

文本左侧的所有空白都保留在指针光标处。如何将文本的长度限制为仅文本？

【问题讨论】：

【解决方案1】：

正如您评论的那样，我猜您需要的是margin 而不是padding，因为padding 计入元素内部，而margin 计入元素外部。学习CSS Box Model，你就会明白这个概念。

.ChartLink, a {
   margin: 10px;
   cursor: pointer;
}

好吧，您的问题解释了一些不同的东西，并且您提供的标记也不同，所以我假设您将 div 元素嵌套在 a 中，就好像它只是 a 一样，而不是空白不会存在默认为inline 元素。由于div 默认为block 级别元素，因此您需要将其设为inline。

a.ChartLink div {
    display: inline;
}

虽然我们在这里创建div 元素inline，但最好使用span。

【讨论】：

正是我的想法。 :) 删除了我的评论。
很抱歉给您带来了困惑。实际上是相反的。我在一个 div 中有多个元素，并且元素之后的空白仍然带有指针。
@Tim 你能造个小提琴吗
@Tim 编辑了我的答案，你可以查看
@Mr.Alien 在我创建小提琴时发现了错误。由于我的 '.ChartLink, a' css 调用，指针被应用于 '.ChartLink 类 div，这使得整个 div（包括空白）都使用指针。 Here's 类似于我的问题。感谢您的帮助！