Question

我是CSS造型的新手，到目前为止，我能够将文字对齐。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

这是一个解决方案。

要对齐您需要设置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 2

您需要将表单显示为内联元素（如<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>

Answer 3

将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

好的，你正在使用的是type =＆＃34;提交＆＃34;而不是type =＆＃34; button＆＃34;。其次，您应该将类添加到实际按钮中，如此

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

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

进行样式设置

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

将所有按钮设置为绿色，然后您可以通过添加类或id选择器来缩小范围，例如

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

要为每个单独的按钮着色，您需要指定内联样式

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

对于每一个或给每个人一个不同的类或id，下面的示例添加一个新类，同时保持按钮的样式统一。

  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>

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

CSS按钮样式和对齐

4 个答案: