CSS按钮样式和对齐

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

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

正文{
边际：0px；
填充：0px；
}
#天气{
字体系列：“Helvetica”，Helvetica monospace；
字号：2em；
线高：0.5em；
保证金：自动；
宽度：100%；
文本对齐：居中；
}
.按钮{
背景色：#4CAF50；/*绿色*/
边界：无；
颜色：白色；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
}

温度：°

湿度：%

LED:

对于您正在使用type=“submit”而不是type=“button”的选项，确定。其次，您应该像这样将类添加到实际按钮中

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

这将使所有按钮都变成绿色，然后您可以通过添加类或id选择器（如

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

要给每个按钮上色，您需要指定一个内联样式，以便

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

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

温度：°

湿度：%

LED:

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

这里有一个解决方案

要对齐所有按钮，需要将

display:inline block

设置为表单

正文{
边际：0px；
填充：0px；
}
#天气{
字体系列：“Helvetica”，Helvetica monospace；
字号：2em；
线高：0.5em；
保证金：自动；
宽度：100%；
文本对齐：居中；
}
.按钮{
/*背景色：#4CAF50；绿色*/
边界：无；
颜色：白色；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：块；
保证金：0自动；
宽度：50%；
字体大小：16px；
}
形式{
显示：内联块；
}
div>输入：第n个子项（1）{
背景颜色：浅绿色；
}
div>输入：第n个子项（2）{
背景色：红色；
}
表格>输入{
背景颜色：浅蓝色；
}

温度：°

湿度：%

LED:

将CSS链接到HTML

为每个按钮添加一个ID（这是为了使它们具有不同的样式）

在CSS中，使用此代码设置按钮样式

正文{
边际：0px；
填充：0px；
}
#引导{
背景颜色：绿色；
颜色：白色；
}
#引导{
背景色：红色；
颜色：白色；
}

温度：°

湿度：%

LED:

您需要将表单显示为内联元素（如

）。为此使用

display:inline

您可以给每个按钮一个ID，然后更改它们各自的CSS，以及为按钮组设置公共属性

有关完整示例，请参见代码片段

#天气{
字体系列：“Helvetica”，Helvetica monospace；
字号：2em；
线高：0.5em；
文本对齐：居中；
}
.按钮{
/*背景#ecf0f1*/
文本对齐：居中；
}
形式{
显示：内联；
}
#引导，
#带头,，
#数据历史{
边框颜色：#333；
颜色：白色；
}
#引导{
背景：#1abc9c；
}
#引导{
背景：#e74c3c；
}
#数据历史{
背景：#3498db；
}

温度：°

湿度：%

LED:

尝试更改

的样式。按钮

：添加

边距：0自动；宽度：300px和替换
显示：内联块带
显示：块
@Banzay您的建议将文本下的文本按块对齐。我想把每个按钮并排对齐谢谢！如何在不同的按钮上添加不同的颜色请尝试在此处提供问题的答案，您可以对问题进行评论以寻求建议。很想添加评论，但目前不允许添加，我正在编辑我的答案，以包含更全面的答案answer@PeterWaters谢谢你的解决方案。如何向按钮添加空格并将其缩小到当前大小的3/4。请参阅添加高度和宽度到您的按钮代码，这将让您调整按钮的大小，以获得您的完美尺寸。至于空格，如果你指的是按钮之间的空格，那么你可以使用边距。谢谢！如何去除按钮后面的绿色横幅？删除
背景色：#4CAF50；/*绿色*/
来自
。按钮
规则显示是否去除背景色？在.button CSS选择器中，删除“background:#ecf0f1”行或将其更改为background:#none（删除它的作用是这样的）。我可以编辑代码段，请重试。
  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;
    }

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