J'ai l'ancien code classique comme ceci
<td align="right">qui fait ce qu'il dit : il aligne à droite le contenu de la cellule. Ainsi, si je place 2 boutons dans cette cellule, ils apparaîtront à l'emplacement droit de la cellule.
Mais ensuite, j'ai refactorisé cela en CSS, mais il n'existe pas d'alignement droit ? Je vois text-align, est-ce la même chose ?
Utilisez
text-align: rightLa propriété CSS text-align décrit comment le contenu en ligne, comme le texte aligné dans son élément de bloc parent. text-align ne contrôle pas l'alignement l'alignement des éléments de bloc eux-mêmes, seulement leur contenu en ligne.
Voir
<td class='alnright'>text to be aligned to right</td>
<style>
.alnright { text-align: right; }
</style>
Un <input type="button"> est-il un élément de bloc parce que celui-ci n'est pas aligné correctement ?
Cela dépend. J'ai un paragraphe, qui est un bloc, à l'intérieur d'une cellule de tableau (css display : table-cell), et si je donne à ce paragraphe une largeur de 100%, il commence à respecter le text-align right. Je suppose que définir une largeur n'est pas toujours la meilleure chose à faire.
Je suppose donc que la propriété text-align n'est pas très bien nommée si elle s'applique aux boutons et aux contrôles ainsi qu'au texte. Peut-être aurait-il fallu l'appeler content-align ?
N'oubliez pas le sélecteur "nth-child" de CSS3. Si vous connaissez l'index de la colonne sur laquelle vous souhaitez aligner le texte à droite, vous pouvez simplement spécifier
table tr td:nth-child(2) {
text-align: right;
}Dans les cas de grands tableaux, cela peut vous faire économiser beaucoup de marge supplémentaire !
voici un violon pour toi.... https://jsfiddle.net/w16c2nad/
Ce qui a marché pour moi maintenant est :
CSS :
.right {
text-align: right;
margin-right: 1em;
}
.left {
text-align: left;
margin-left: 1em;
}HTML :
<table width="100%">
<tbody>
<tr>
<td class="left">
<input id="abort" type="submit" name="abort" value="Back">
<input id="save" type="submit" name="save" value="Save">
</td>
<td class="right">
<input id="delegate" type="submit" name="delegate" value="Delegate">
<input id="unassign" type="submit" name="unassign" value="Unassign">
<input id="complete" type="submit" name="complete" value="Complete">
</td>
</tr>
</tbody>
</table>Voir le violon suivant :
td celluleLes réponses fournies font un excellent travail pour aligner à droite le texte dans une td cellule.
Ce n'est peut-être pas la solution lorsque vous cherchez à aligner un élément de bloc comme indiqué dans la réponse acceptée. Pour obtenir un tel résultat avec un élément de bloc, j'ai trouvé utile d'utiliser les marges ;
selector {
margin: top right bottom left;
}td > selector {
/* there is a shorthand, TODO! Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
