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對齊標籤和輸入字段

回答

相關問題