內聯塊元素在懸停效果上下降？

我試圖配置一個非常基本的動畫效果，其中懸停在一個div上，使用CSS過渡在0到100％width之間爲其設置了一個form元素。 Here is a fiddle for reference。我遇到兩個問題：首先，在這種情況下，儘管設置爲display:inline-block和vertical-align:top，但<p>元素和<form>元素不是垂直排列的。其次，在將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>

來源

2017-07-26 nickpish

如何像這樣有點不同？ https://jsfiddle.net/8bbop1w5/14/ –

如果您需要將表格保留在「p」元素上方，則應將其放在它之前。 'p'上的'margin'阻止了垂直對齊，我注意到你的'＃access'上沒有聲明'vertical-align'。如果你需要這些元素保持在一起，它們應該顯示爲'inline-block'元素。 – UncaughtTypeError

你設置你的表單上懸停寬度爲100％，這將需要其母公司的整個寬度。可以降低該比例，使其適合於與段落單行線，或只需添加這#wrapper指定：

white-space: nowrap;

來源

2017-07-26 16:00:17

因爲你設置了form#access到100%這需要#wrapper container的整個寬度。

這應該工作，而不是：

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

也可以考慮在包裝使用display: inline-flex，這樣你就不需要設置display: inline-block，它更容易中心兩個元素。

我更新了fiddle here

來源

2017-07-26 15:59:40 lumio

內聯塊元素在懸停效果上下降？

回答

相關問題