代码之家  ›  专栏  ›  技术社区  ›  J-Roel

如何从相对位置删除额外空间添加高度?

  •  0
  • J-Roel  · 技术社区  · 8 年前

    我有一个悬停,允许用户在输入密码时从“显示/隐藏”更改为:

    <label for="Password">Create a Password</label>
    @Html.PasswordFor(m => m.Password)
    <span class="input-hover password-show">SHOW</span>
    <div class="validation-rules"></div>
    <label for="ConfirmPassword">Confirm Password</label>
    @Html.PasswordFor(m => m.ConfirmPassword);
    <span class="input-hover confirmpassword-show">SHOW</span>
    
    
    input + .input-hover{
        position: relative;
        display: inline-block;
        height: 46px;
        width: 50px;
        top: -46px;
        left: calc(100% - 70px);
        line-height: 46px;
        padding: 0;
        margin: 0;
        cursor: pointer;
        color: #B2B4B2;
        font-weight: bold;
        text-align: right;
        z-index: 10;
    }
    

    这会将46px添加到流中。所以我的输入和下一个标签之间的元素有46px的高度…即使我的元素设置为-46px;

    我不能使用绝对值,因为我希望它是相对于当前输入的,而不是相对于祖辈容器的(必须是响应的,并且允许添加/删除dom元素……验证规则)。

    边距:-46px;将高度拉回到正常值…某种程度上。似乎把左边的计算搞砸了。

    我可以调整它使单词合适,但是当设置边距时为什么它会向左移动?-46px;这没有任何意义。你知道怎么做吗?

    这是一把小提琴,看看我有什么: FIDDLE

    谢谢!

    1 回复  |  直到 8 年前
        1
  •  1
  •   Nathaniel Rink    8 年前

    我想当你开始 margin: -46px 您正在设置所有边距。所以你得到了 margin-top: -46px 你是有意的但是你也得到了 margin-left: -46px .

    当我只设定了下边距时,它对我起了作用:

    margin: 0 0 -46px 0;

    或: 左边距:-46px

    我想你也得到了额外的空间,因为你的显示器是内联块。如果设置为 display: block 具有 margin-top: -46px; 你可以把它与div的底部一起冲洗。