Wie kann ich div-Elemente rechts ausrichten?
Der Textkörper meines Html-Dokuments besteht aus 3 Elementen, einer Schaltfläche, einem Formular und einer Leinwand. 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, folgen sie nicht mehr einander und sind stattdessen nebeneinander horizontal..., hier ist der Code, den ich bisher habe, ich möchte das Formular direkt nach der Schaltfläche auf der rechten Seite ohne Zwischenraum zu folgen.
#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>
292
3
Floats sind ok, aber problematisch mit ie6 & 7.
Ich würde es vorziehen,
margin-left:auto; margin-right:0;auf dem inneren div zu verwenden.Sie können ein Div erstellen, das sowohl das Formular als auch die Schaltfläche enthält, und dann das Div nach rechts verschieben, indem Sie "Float: right" einstellen.
Meinst du so? http://jsfiddle.net/6PyrK/1
Sie können die Attribute
float:rightundclear:both;zum Formular und zur Schaltfläche hinzufügen