Hallo zusammen,
ich habe folgenden HTML code und die CSS-Regel:
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> </title>
<link rel="stylesheet" type="text/css" href="a.css" media="screen" />
</head>
<body>
<section>
<div class = "InformationSection">
<div class = "left">
<p>Hier steht die Information </p>
</div>
<div class = "right">
<button class = "btn" > Remove </button>
<button class = "btn" > Add </button>
</div>
</div>
</section>
</body>
</html>
Alles anzeigen
Code
body {
background-color: lightgray;
margin: 0 auto;
width: 90%;
}
section {
background-color: bisque;
}
.left {
float: left;
}
.right {
float: right;
}
button {
background-color: DodgerBlue;
border: none;
color: white;
font-size: 14px;
cursor: pointer;
width: 100px;
height: 30px;
margin-left: 10px;
margin-bottom: 5px;
margin-top: 5px;
}
Alles anzeigen
Wenn ich die Vererbung richtig verstehe, sollten die Childelemente von section die Hintergrundsfarbe von section bekommen. Das ist aber nicht der fall. Wenn ich aber die .right oder .left Regel lösche bekommen die divs die Farbe vom Section.
Warum ist das so?
Wie muss ich die HTML-Tags / CSS-Regel umstrukturieren(ohne, left und right zu löschen), damit die divs die selbe Farbe haben wie section?
Vielen Dank im Voraus