CSS Div Alignment Form

Question

我尝试了所有内容，但我无法将两个#send和#delete div放在与表单输入相同的级别上。

如果我试图将divs置于顶部，那么一切都会随之而来。

此处代码为：http://codepen.io/anon/pen/LZZQJx

＆＃13;

＆＃13;

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;

}

＆＃13;

  <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>

＆＃13;

＆＃13;

＆＃13;

感谢。

Answer 1

由于id为#delete / #send的两个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>