部門不互相對齊

我有兩個div應該並排在一起。但是，一旦我添加填充到左側div的輸入框中，右側div就會移位。部門不互相對齊

任何想法爲什麼？

的HTML和CSS在撥弄如下

<div style="text-align:center"> 
    <div style="display:inline-block;width:350px;height:200px;background-color:rgba(43, 171, 145, 0.54);margin-right:30px"> 
     <div style="text-align:left;height:30px;font-size:21px;padding:5px 0px 0px 10px;letter-spacing:7px;font-weight:bold;color:white;background-color:#2bab91"><u>NEW USER</u></div> 
     <div style=" 
      /* text-align: left; */ 
      padding-top: 20px; 
      width: 100%; 
      "> 
      <input type="text" name="email" id="email" placeholder="(Email)" style=" 
       width: 90%; 
       /* margin: 10px; */ 
       height: 30px; 
       "> 
     </div> 
    </div> 
    <div style="display:inline-block;width:350px;height:200px;background-color: rgba(193, 89, 97, 0.61);margin-left:30px"> 
     <div style="text-align:left;height:30px;font-size:21px;padding:5px 0px 0px 10px;letter-spacing:7px;font-weight:bold;color:white;background-color:#c15961;"><u>EXISTING USER</u></div> 
     <div> 
      <input type="text" name="email" id="email" placeholder="(Email)"> 
     </div> 
    </div> 
</div>

http://jsfiddle.net/cAJgq/

來源

2014-01-29 edelweiss

向元素添加'vertical-align：top;'.. http://jsfiddle.net/Ua9dV/ –

謝謝！該作品 – edelweiss

我會張貼作爲答案，但這是一個頻繁的解決方案。我已經在今天的另一個問題上發佈了相同的答案..本週http://stackoverflow.com/questions/21414350/html-css-mysterious-top-padding-that-doesnt-go-away/21414392#21414392和多個其他人。 –

添加vertical-align: top到div風格

來源

2014-01-29 02:58:23 Joel

你的代碼是不乾淨......把你的CSS到CSS文件最好清楚地看到你的html代碼

     <div style="display:inline-block;width:350px;height:200px;background-color:rgba(43, 171, 145, 0.54);margin-right:30px"> 
         <div style="text-align:left;height:30px;font-size:21px;padding:5px 0px 0px 10px;letter-spacing:7px;font-weight:bold;color:white;background-color:#2bab91"><u>EXISTING USER<</u></div> 

         <div style="padding-top: 20px;width: 100%;"> 
          <input type="text" name="email" id="email" placeholder="(Email)" style="width: 90%;height: 30px;"> 
         </div> 
        </div> 
          <div style="display:inline-block;width:350px;height:200px;background-color:red;margin-right:30px"> 

           <div style="text-align:left;height:30px;font-size:21px;padding:5px 0px 0px 10px;letter-spacing:7px;font-weight:bold;color:white;background-color:#c15961"><u>NEW USER</u></div> 

          <input type="text" name="email" id="email" placeholder="(Email)" style="width: 90%;height: 30px;margin-top: 20px;"> 
        </div>

http://jsfiddle.net/cAJgq/1/

來源

2014-01-29 03:02:30 Oryos

部門不互相對齊

回答

相關問題