CSS Div Alignmentフォーム

Question

私はすべてを試しましたが、2つの#sendと#delete divをフォーム入力と同じレベルに配置することはできません。

divをマージンにしようとすると、すべてが次のようになります。ここで

コード：http://codepen.io/anon/pen/LZZQJx

body { 
 
    text-align: center; 
 
} 
 

 
h1 { 
 
    font-family: Helvetica; 
 

 

 
} 
 

 
form input { 
 
    width: 500px; 
 
    font-size: 30px; 
 

 
} 
 

 
form input:focus { 
 
    outline: none; 
 
} 
 

 
form { 
 
    display: inline; 
 

 
} 
 

 
.inline { 
 
    display: inline-block; 
 
} 
 

 
#send { 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: green; 
 

 
} 
 

 
#delete { 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: red; 
 

 
} 
 

 
.entry { 
 
    font-family: helvetica; 
 
    border: solid 1px grey; 
 
    -webkit-user-select: none; 
 

 
}

<h1>ToDo</h1> 
 

 
    <div class="inline" id="delete"></div> 
 

 
     <form class=""> 
 
      <input style="" type="text" name="input" value="" placeholder=" Einen Eintrag hinzufügen ..."> 
 
     </form> 
 

 
    <div class="inline" id="send"></div> 
 

 
    <div id="container"> 
 

 
    </div>

感謝。

Answer 1

IDの#delete/#sendを持つ2つのdivのがdisplay: inlineのように設定されているので、次のようにvertical-align: topにそれらを設定することができます。

body { 
 
    text-align: center; 
 
} 
 

 
h1 { 
 
    font-family: Helvetica; 
 

 

 
} 
 

 
#delete, #send { 
 
    vertical-align: top; 
 
} 
 

 
form input { 
 
    width: 500px; 
 
    font-size: 30px; 
 

 
} 
 

 
form input:focus { 
 
    outline: none; 
 
} 
 

 
form { 
 
    display: inline; 
 

 
} 
 

 
.inline { 
 
    display: inline-block; 
 
} 
 

 
#send { 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: green; 
 

 
} 
 

 
#delete { 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: red; 
 

 
} 
 

 
.entry { 
 
    font-family: helvetica; 
 
    border: solid 1px grey; 
 
    -webkit-user-select: none; 
 

 
}

<h1>ToDo</h1> 
 

 
    <div class="inline" id="delete"></div> 
 

 
     <form class=""> 
 
      <input style="" type="text" name="input" value="" placeholder=" Einen Eintrag hinzufügen ..."> 
 
     </form> 
 

 
    <div class="inline" id="send"></div> 
 

 
    <div id="container"> 
 

 
    </div>