HTML对齐标签和输入字段

在表格中，我有一个引用标签，然后是一个输入字段。我什么都试过，但输入字段总是移动参考标记下（同时使用跨度一个普通的文本字段被正确地与<a href>标记对齐HTML对齐标签和输入字段

下面是一个例子：

<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>

在现实中我代码略有不同，并输入字段从模板到来，但是这不应该是我猜的问题。

我怎样才能获得标签旁边的输入字段？

来源

2017-09-07 Michael H.

无论是锚，也不是输入是块级元素默认情况下，所以包装很可能是由与分配给这些元素的类关联的CSS引起的。如果你看下面的代码片段，它是你所拥有的精简版本，显示没有这些类，裸露的元素就像你想要的那样运行。

我会建议使用你的开发工具来确定什么CSS导致你遇到的包装问题，并修复它（可能会导致此宽度或显示属性）。如果你不能这样做，那么写一些覆盖CSS来改正你的样式表。最后，您可以使用另一种安装程序推荐的内联样式，但我不会推荐这种方法。内联样式是一次性修复，并创建一段时间内难以维护的代码。

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

来源

2017-09-07 19:27:40

您好我检查了所有的设置与开发工具，我仍然无法找到为什么输入字段被移动到下一行，而不是behinf的“”标签的原因。奇怪的事情 - 如果我使用“”标签，它会很好地工作！ –

HTML对齐标签和输入字段

回答

相关问题