CSS-Taste Styling und Ausrichtung

Question

Ich bin ein Neuling für CSS-Styling und bis jetzt bin ich in der Lage, meinen Text ausgerichtet zu bekommen.

Ich kann jedoch keine Stile auf meine Schaltflächen anwenden und sie nebeneinander unter dem Text ausrichten. Ich möchte jedem Knopf eine andere Farbe geben.

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

1. Sie müssen das Formular als Inline-Element angezeigt werden (wie <span>). Verwenden Sie hierzu display: inline.
2. Sie können jeder Schaltfläche eine ID zuweisen und dann ihr individuelles CSS ändern sowie gemeinsame Eigenschaften für die Schaltflächengruppe festlegen.

Siehe das Code-Snippet für das vollständige Beispiel.

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

Ok für eine Sie Typ type = "button" statt verwenden = "submit". Zweitens sollten Sie die Klasse zu Ihrer eigentlichen Tasten wie so

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

Nur ein wenig mehr in die Tiefe gehen das Hinzufügen, Sie können auch Art mit diesem css

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

, die alle Tasten Stil wird grün Sie können dann, dass verengen mehr sogar von Klassen oder die ID-Selektoren wie

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

um jede einzelne Taste Farbe müssen Sie entweder zuweisen eine Inline-Zugabe Stil so

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

für jede oder jeder einzelne fügt das Beispiel unten eine andere Klasse oder id geben sowie eine neue Klasse als den Stil Ihrer Schaltfläche Uniform zu halten.

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

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

Wie Sie hier die Hauptunterschied zu sehen ist, dass jede Taste nun zwei Klassen hat. Einer definiert den Knopfstil und der andere definiert die Farbe. Dies ist nur eine Möglichkeit, Sie können die Eingabe [style = button] verwenden, um das Aussehen all Ihrer Schaltflächen zu definieren und nur die eine Klasse zu verwenden oder Sie könnten individuelle Klassen für jede andere Schaltfläche erstellen, denen Sie auch IDs hinzufügen könnten die Tasten und verwenden Sie den #id-Selektor, um Ihren Stil hinzuzufügen, aber ich persönlich habe gefunden, dass dies eine einfachere Möglichkeit ist, Ihre Codierung zu verwalten.

Answer 3

Hier ist eine Lösung.

Um alle Tasten auszurichten, müssen Sie display: inline-block zu bilden.

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 4

1. Verknüpfen Sie Ihre CSS zu Ihrem HTML

2. eine ID für jede Ihrer Tasten Put (das ist sie anders stylen)

3. In Ihrem CSS, style die Tasten mit diesem Code.

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>