【问题标题】: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; }

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

【问题讨论】:

    标签: html css text hyperlink


    【解决方案1】:

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

    Demo

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

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

    Demo

    a.ChartLink div {
        display: inline;
    }
    

    What you are doing

    What you want to


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

    【讨论】:

    • 正是我的想法。 :) 删除了我的评论。
    • 很抱歉给您带来了困惑。实际上是相反的。我在一个 div 中有多个 元素,并且 元素之后的空白仍然带有指针。
    • @Tim 你能造个小提琴吗
    • @Tim 编辑了我的答案,你可以查看
    • @Mr.Alien 在我创建小提琴时发现了错误。由于我的 '.ChartLink, a' css 调用,指针被应用于 '.ChartLink 类 div,这使得整个 div(包括空白)都使用指针。 Here's 类似于我的问题。感谢您的帮助!
    猜你喜欢
    • 2011-10-01
    • 2014-09-05
    • 2014-06-05
    • 2015-10-14
    • 1970-01-01
    • 2011-06-08
    • 1970-01-01
    • 2011-04-28
    • 2017-10-17
    相关资源
    最近更新 更多