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

好的，您使用的是 type="submit" 而不是 type="button"。其次，您应该像这样将 class 添加到您的实际按钮中

<input type="button" class="button" value="LED ON" onclick="ledOn()">

只是为了更深入一点，您还可以使用 css

样式

input[style=button]{
background-color: green;
}

这会将所有按钮的样式设置为绿色，然后您可以通过添加 classes 或像

这样的 id 选择器来进一步缩小范围

#ON input[style=button]{
background-color: green;
}

要为每个单独的按钮着色，您需要分配一个内联样式，这样

<input type="button" style="background-color: green">

为每一个或给每一个一个不同的 class 或 id 下面的示例添加了一个新的 class 并保持按钮的样式统一。

  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 {
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
    .green{
          background-color: #4CAF50; /* Green */
          }
    .red{
      background-color: red;
    }

和HTML

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

如您所见，主要区别在于每个按钮现在有两个 classes。一个定义按钮样式，另一个定义颜色。这只是一种方法，您可以使用 input[style=button] 来定义所有按钮的外观，并且只使用一个 class 或者您可以为每个按钮创建单独的 classes不同的按钮，您还可以将 ID 添加到按钮并使用 #id 选择器添加您的样式，但我个人发现这是一种更容易管理编码的方法。

Answer 2

这是一个解决方案。

要对齐所有需要设置 display: inline-block 的按钮。

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>

Answer 3

Link 你的 CSS 到你的 HTML
为每个按钮添加一个 ID（这是为了让它们的样式不同）
在您的 CSS 中，使用此代码设置按钮样式。

body {
  margin: 0px;
  padding: 0px;
}
#led-on {
  background-color: green;
  color: white;
}
#led-off {
  background-color: red;
  color: white;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
  <div id="weather">
    <p>Temperature: &deg;</p>
    <p>Humidity: %</p>
    <p>LED:</p>
  </div>

  <div id="ON" class="button">
    <input id="led-on" type="button" value="LED ON">
    <input id="led-off" type="button" value="LED OFF">
  </div>
</body>

</html>

Answer 4

您需要将表单显示为内联元素（如 <span>）。为此使用 display: inline。
您可以为每个按钮指定一个 ID，然后更改它们各自的 CSS，并为按钮组设置通用属性。

查看完整示例的代码片段。

#weather{
  font-family: 'Helvetica', Helvetica monospace;
  font-size: 2em;
  line-height: 0.5em;
  text-align: center;
}
.button {
  /*background: #ecf0f1;*/
  text-align: center;
}

form {
  display: inline;
}
#led-on,
#led-off,
#data-history {
  border-color: #333;
  color: white;
}
#led-on {
  background: #1abc9c;
}
#led-off {
  background: #e74c3c;
}
#data-history {
  background: #3498db;
}

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

CSS 按钮样式和对齐方式

CSS button styling and alignment

css

html

button

divide