CSS 按钮样式和对齐方式

Question

我是 CSS 样式的新手，到目前为止我能够对齐我的文本。

但是，我无法将样式应用于我的按钮并将它们并排对齐到文本下方。我想给每个按钮不同的颜色。

body {
  margin: 0px;
  padding: 0px;
}
#weather{
  font-family: 'Helvetica', Helvetica monospace;
  font-size: 2em;
  line-height: 0.5em;
  margin: auto;
  width: 100%;
  text-align: center;
}
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

<div id="weather">
  <p>Temperature:  &deg;</p>
  <p>Humidity:  %</p>
  <p>LED:</p>
</div>
<div id="ON" class="button">
  <input type="submit" value="LED ON" onclick="ledOn()">
  <input type="submit" value="LED OFF" onclick="ledOff()">
  <form action="index.html" target="_newtab">
    <input type="submit" value="Data History" />
  </form>
</div>

Answer 1

这是一个解决方案。

要对齐所有按钮，您需要将 display: inline-block 设置为 form。

body {
  margin: 0px;
  padding: 0px;
}
#weather{
  font-family: 'Helvetica', Helvetica monospace;
  font-size: 2em;
  line-height: 0.5em;
  margin: auto;
  width: 100%;
  text-align: center;
}
.button {
 /* background-color: #4CAF50;  Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: block;
  margin: 0 auto;
  width: 50%;
  font-size: 16px;
}
form {
display: inline-block;
}
div > input:nth-child(1) {
  background-color: lightgreen;
}
div > input:nth-child(2) {
  background-color: red;
}
form > input {
  background-color: lightblue;
}

<div id="weather">
  <p>Temperature:  &deg;</p>
  <p>Humidity:  %</p>
  <p>LED:</p>
</div>
<div id="ON" class="button">
  <input type="submit" value="LED ON" onclick="ledOn()">
  <input type="submit" value="LED OFF" onclick="ledOff()">
  <form action="index.html" target="_newtab">
    <input type="submit" value="Data History" />
  </form>
</div>