内联块元素会因悬停效果而下降吗？

Question

我正在尝试配置一个非常基本的动画效果，其中将鼠标悬停在 div 上会使用 CSS 过渡。 Here is a fiddle for reference。我遇到了两个问题：首先，在这种情况下，<p> 元素和 <form> 元素没有垂直排列，尽管被设置为 display:inline-block 和 vertical-align:top。其次，悬停在将 form 元素加宽到 100% 时，它会下降到 <p> 元素下方；有人知道这里发生了什么吗？

    #wrapper {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        text-align: left;
        vertical-align: top;
        border: 1px solid #000;
        margin: 0;
        padding: 0;
    }
    #wrapper p {
        font-size: 16px;
        display: inline-block;
        vertical-align: top;
        text-transform: uppercase;
        background-color: rgba(255, 255, 255, 0.5);
        padding: 0.5em 1em;
        cursor: pointer;
    }
    #wrapper:hover form#access {
        width: 100%;
    }
    form#access {
        display: inline-block;
        width: 0%;
        margin: 0;
        padding: 0;
        overflow:hidden;
        -webkit-transition: width 1s ease-in-out;
        -moz-transition: width 1s ease-in-out;
        -o-transition: width 1s ease-in-out;
        transition: width 1s ease-in-out;
    }
    form#access input {
        font-size: 18px;
        display: inline-block;
        vertical-align: top;
        padding: 0;
        margin: 0;
        border: none;
        max-width: 100px;
    }

    <div id="wrapper">
      <p>Enter code:</p>
      <form id="access">
        <input placeholder="code" id="access-code" name="access-code" type="text" tabindex="1" required>
      </form>
    </div>

Answer 1

因为您将 form#access 设置为 100%，这需要 #wrapper container 的整个宽度。

这应该可以代替：

#wrapper:hover form#access {
    width: 100px;
}

还可以考虑在包装器上使用 display: inline-flex，这样您就不需要设置 display: inline-block，并且更容易将两个元素居中。

我更新了你的fiddle here

Answer 2

您将表单设置为悬停时的 100% 宽度，这将占用其父级的整个宽度。您可以降低该百分比，使其适合该段落的一行，或者只需将其添加到 #wrapper:

    white-space: nowrap;

内联块元素会因悬停效果而下降吗？

Inline-block element drops on hover effect?

css

mousehover

css-animations