HTML aligner une étiquette et un champ de saisie

Question

Dans un tableau, j'ai une étiquette de référence, puis un champ de saisie. J'ai tout essayé, mais le champ d'entrée est toujours en mouvement sous la balise de référence (alors qu'un champ de texte normal en utilisant la durée est correctement aligné avec le

tag <a href>

Voici un exemple:.

<td *ngFor="let col of table.columns; let i=index [ngStyle]="col.style" [class]="col.styleClass" 
    [style.display]="col.hidden ? 'none' : 'table-cell'" 
    (click)="onRowClick($event)" > 
    <a href="#" *ngIf="(i==table.expanderColumn)" class="ui-treetable-toggler fa fa-fw ui-c" [ngClass]="{'fa-caret-down':node.expanded,'fa-caret-right':!node.expanded}" 
      [ngStyle]="{'margin-left':level*16 + 'px','visibility': isLeaf() ? 'hidden' : 'visible'}" 
      (click)="toggle($event)" 
      [title]="node.expanded ? labelCollapse : labelExpand"> 
    </a> 
    <input type="text" [(ngModel)]="row.data[column.fieldNameOrPath]"> 
</td> 

En réalité, mon le code est légèrement différent et le champ d'entrée provient d'un modèle, mais cela ne devrait pas être la question que je suppose.

Comment puis-je obtenir le champ d'entrée juste à côté de l'étiquette?

Answer 1

ni l'ancre ni la l'entrée sont Par défaut, les éléments de niveau sont bloqués, de sorte que l'encapsulation est probablement due au CSS associé aux classes affectées à ces éléments. Si vous regardez l'extrait ci-dessous, c'est une version dépouillée de ce que vous avez, montrant que sans les classes les éléments nus se comportent comme vous le souhaitez.

Je vous recommande d'utiliser vos outils de développement pour déterminer quelle est la cause du problème de retour à la ligne que vous rencontrez et y remédier (il peut y avoir une largeur ou une propriété d'affichage). Si vous ne pouvez pas faire cela, alors écrivez un CSS de remplacement pour le corriger dans votre feuille de style. Enfin, vous pouvez utiliser un style en ligne comme recommandé dans une autre réponse, mais je ne recommanderais pas cette approche. Les styles en ligne sont des corrections uniques et créent du code difficile à maintenir dans le temps.

<table> 
 
    <tr> 
 
    <td> 
 
     <a href="#">Anchor</a> 
 
     <input type="text"/> 
 
    </td> 
 
    </tr> 
 
</table>