輸入邊界影響span的位置爲什麼？

我知道如何解決這個問題，讀請，我要找的評論，爲什麼我在首位這一問題，它只是奇怪，輸入邊界影響span的位置爲什麼？

請閱讀樣式代碼

評論

問題：我有這個奇怪的問題，輸入邊框寬度影響div的位置，例如，如果我給邊框寬度5px輸入;跨度將開始在5倍相對於父，如果我給邊界寬度10px輸入跨度將從10px開始它的父div？它有點consuting，可能是我錯過了一些東西明顯，

這裏是代碼片段

.mainDiv { 
 
      display: flex; 
 
     } 
 
     input { 
 
      height: 100%; 
 
      /*To change understand the problem 
 
      just change the border width*/ 
 
      border: 10px solid blue; 
 

 
     } 
 
     div div { 
 
      border: 2px solid black; 
 
      height: 30px; 
 
      /*i can solve it by displaying this 
 
      container as flex container as well*/ 
 

 
     } 
 
     span { 
 
      border: 2px solid red; 
 
      /*First Edit Display them inline block 
 
      and also give height*/ 
 
      display: inline-block; 
 
      height: 30px; 
 
     }

<form action=""> 
 
      <div class="mainDiv">    
 
       <div> 
 
        <input type="text" required><span>not good</span> 
 
       </div> 
 
      </div> 
 
     </form>

來源

2017-10-20 user2860957

_「我正在尋找爲什麼我首先遇到了這個問題」 - 因爲如果你想要不同高度的內聯元素的不同對齊方式，你沒有指定'vertical-align'，你應該這樣做，簡單的_default_ ... – CBroe

好吧，我會盡力實施你的解決方案，但也改變了跨度的風格代碼，請看看 – user2860957

@CBroe謝謝我得到了點，感謝您的幫助 – user2860957

有輸入和空格跨度之間的水平差距。如果清除元素之間的白色斑點，那麼橫向間隙就會消失。

<input type="text" required><span>not good</span>

由於元素在文本的基線上對齊，因此父級頂部和頂級之間存在垂直間距。注意輸入的底部，邊界內部以及跨度的底部。

來源

2017-10-20 02:34:38

首先，我不明白什麼你的意思是空白和基線，比我理解，比我試圖實現你的解決方案，並沒有工作，我也編輯span樣式請看看，現在我使用你的代碼，意味着沒有空白現在，謝謝你再看看 – user2860957

謝謝我一開始並不理解第二部分，它是美麗的答案，但我只能一勞永逸不是兩次。 – user2860957

輸入邊界影響span的位置爲什麼？

回答

相關問題