Der Hauptteil meines HTML-Dokuments besteht aus 3 Elementen, einer Schaltfläche, einem Formular und einer Zeichenfläche. Ich möchte, dass die Schaltfläche und das Formular rechtsbündig sind und die Leinwand linksbündig bleibt. Das Problem ist, wenn ich versuche, die ersten beiden Elemente auszurichten, sie nicht mehr aufeinander folgen und stattdessen horizontal nebeneinander liegen. Hier ist der Code, den ich bisher habe. Ich möchte, dass das Formular direkt nach der Schaltfläche rechts folgt ohne Platz dazwischen.
#cTask {
background-color: lightgreen;
}
#button {
position: relative;
float: right;
}
#addEventForm {
position: relative;
float: right;
border: 2px solid #003B62;
font-family: verdana;
background-color: #B5CFE0;
padding-left: 10px;
}<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="timeline.js"></script>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" />
</head>
<body bgcolor="000" TEXT="FFFFFF">
<div id="button">
<button onclick="showForm()" type="button" id="cTask">
Create Task
</button>
</div>
<div id="addEventForm">
<form>
<p><label>Customer name: <input></label></p>
<p><label>Telephone: <input type=tel></label></p>
<p><label>E-mail address: <input type=email></label></p>
</form>
</div>
<div>
<canvas id="myBoard" width="1000" height="600">
<p>Your browser doesn't support canvas.</p>
</canvas>
</div>
</body>
</html>
margin-left: auto;aber das hat nicht funktioniert, was mich überrascht hat, weil das Element, das ich nach rechts ausrichten möchte, relativ ist.