Kroppen af mit html-dokument består af 3 elementer, en knap, en formular og et lærred. Jeg ønsker, at knappen og formularen skal være højrejusteret, og at lærredet skal forblive venstrejusteret. Problemet er, at når jeg forsøger at justere de to første elementer, følger de ikke længere hinanden, men er i stedet ved siden af hinanden horisontalt?, Her er den kode jeg har indtil videre, jeg vil have formularen til at følge direkte efter knappen til højre uden mellemrum.
#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>
Du kan lave en div, der indeholder både formularen & knappen, og derefter få div'en til at flyde til højre ved at indstille float: right;
.
Mener du sådan her?
/embedded/result,js,html,css/">Du kan tilføje attributterne float:right
og clear:both;
til formularen og knappen