Corpul meu document html este format din 3 elemente, un buton, o formă, și o pânză. Vreau buton și formă pentru a fi aliniat la dreapta și pânză să rămână aliniate la stânga. Problema este atunci când am încerca să se alinieze la primele două elemente, acestea nu mai urmează unul după altul și, în schimb, sunt unul lângă altul orizontal?, iata codul ce am până acum, vreau formă să urmeze imediat după butonul de pe dreapta, cu nici un spațiu între ele.
#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>
Puteți face un div care conține atât forma, cât & butonul, apoi face div plutesc la dreptul de stabilire float: right;`.
Răspunsuri vechi. O actualizare: utilizarea flexbox, destul de mult funcționează în toate browserele acum.
<div style="display: flex; justify-content: flex-end">
<div>I'm on the right</div>
</div>
Și puteți obține chiar crescator, pur și simplu:
<div style="display: flex; justify-content: space-around">
<div>Left</div>
<div>Right</div>
</div>
Si crescator:
<div style="display: flex; justify-content: space-around">
<div>Left</div>
<div>Middle</div>
<div>Right</div>
</div>
Alte răspunsuri pentru această întrebare nu sunt atât de bine din `float:nu poate merge în afara de un părinte div (overflow: hidden pentru mamă, uneori, ar putea ajuta) și margin-left: auto, marja de-dreapta: 0 pentru m-am't de lucru în imbricate complexe divs (am n't investiga de ce).
Am'am dat seama că, pentru anumite elemente de text-align: nu funcționează, presupunând că acest lucru funcționează atunci când elementul și părinte sunt atât de inline
sau inline-block
.
Notă: text-align
proprietate CSS descrie modul inline conținut, cum ar fi text este aliniat în părintele său element de bloc. text-align
nu controlează alinierea bloc de elemente în sine, singura lor conținut inline.
Un exemplu:
<div style="display: block; width: 80%; min-width: 400px; background-color: #caa;">
<div style="display: block; width: 100%">
I'm parent
</div>
<div style="display: inline-block; text-align: right; width: 100%">
Caption for parent
</div>
</div>
[Aici's un JS Vioara][1].
Vrei sa spui ca asta?
/embedded/result,js,html,css/">Puteți adăuga atribute ale float:right " și " clear:both;
pentru a forma și butonul
Dacă tu nu't trebuie să se sprijine IE9 și mai jos puteți utiliza flexbox pentru a rezolva acest lucru: codepen
Nu's, de asemenea, câteva bug-uri cu IE10 și 11 (flexbox suport), dar ele nu sunt prezente în acest exemplu
Puteți alinia vertical <butonul> și<formă>
de ambalaj-le într-un recipient cu flex-direcție: coloana`. Sursa ordinea elementelor va fi ordinea în care au're afișate de sus în jos așa că am reordonat ei.
Apoi, puteți alinia orizontal forma & butonul recipient cu panza de ambalaj-le într-un recipient cu flex-direcție: rând`. Din nou sursa ordinea elementelor va fi ordinea în care au're afișate de la stânga la dreapta așa că am reordonat ei.
De asemenea, acest lucru ar necesita-vă că eliminați toate "poziția" și "float" reguli de stil din codul legate în cauză.
Aici's o împodobite în jos versiune a HTML în codepen legate de mai sus.
<div id="mainContainer">
<div>
<canvas></canvas>
</div>
<div id="formContainer">
<div id="addEventForm">
<form></form>
</div>
<div id="button">
<button></button>
</div>
</div>
</div>
Și aici este relevant CSS
#mainContainer {
display: flex;
flex-direction: row;
}
#formContainer {
display: flex;
flex-direction: column;
}
Puteți folosi pur și simplu padding-left:60% (de ex) pentru a alinia conținutul dvs. la dreapta și în același timp folie de conținutul în receptiv recipient (I necesare navbar in cazul meu) pentru a se asigura că funcționează în toate exemplele.
Dacă sunteți folosind bootstrap, apoi:
<div class="pull-right"></div>