Question

在表格中，我有一个引用标记，然后是一个输入字段。我尝试了所有内容，但输入字段始终在参考标记下方移动（使用span的普通文本字段与<a href>标记正确对齐。

以下是一个例子：

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

实际上我的代码略有不同，输入字段来自模板，但这不应该是我猜的问题。

如何在标签旁边输入输入字段？

Answer 1

默认情况下，锚和输入都不是块级元素，因此包装很可能是由与分配给这些元素的类关联的CSS引起的。如果你看一下下面的代码片段，它就是你所拥有的一个精简版本，表明如果没有这些类，那么裸元素的行为就像你想要的那样。

我建议使用您的开发工具来确定哪些CSS导致您遇到的换行问题并在那里修复它（可能有宽度或显示属性导致此问题）。如果你不能这样做，那么写一些覆盖CSS来在样式表中纠正它。最后你可以使用另一个anwser推荐的内联样式，但我不推荐这种方法。内联样式是一次性修复，并创建难以长期维护的代码。

＆＃13;

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

＆＃13;

HTML对齐标记和输入字段

1 个答案: