我的输入栏之间有空格,它只是将它们全部加在一起,这是我不想要的

问题描述 投票:0回答:1
<div class="row" style="margin-bottom: 0.1cm">
                        <div class="col-xs-4">
                            Fuel temp probe cap:
                        </div>
                        <div class="col-xs-2">
                            <input type="text" id="temp_prob" style="height: 20px; width: 100px; margin-left: -25px">
                        </div>
                        <div class="col-xs-4">
                            Canister:
                        </div>
                        <div class="col-xs-2">
                            <input type="text" id="purge_vol" style="height: 20px; width: 100px; margin-left: -25px">
                        </div>
                        <div class="col-xs-4">
                            Fuel Tank:
                        </div>
                        <div class="col-xs-2">
                            <input type="text" id="battery_volt" style="height: 20px; width: 100px; margin-left: -25px">
                        </div>
                        <div class="col-xs-4">
                            Manufacture:
                        </div>
                        <div class="col-xs-2">
                            <input type="text" id="battery_cap" style="height: 20px; width: 100px; margin-left: -25px">
                        </div>
                        <div class="col-xs-4">
                            Manufacture:
                        </div>
                        <div class="col-xs-2">
                            <input type="text" id="rec_energy" style="height: 20px; width: 100px; margin-left: -25px">
                        </div>
                        <div class="col-xs-4">
                            Part Number:
                        </div>
                        <div class="col-xs-2">
                            <input type="text" id="soc_min" style="height: 20px; width: 100px; margin-left: -25px">
                        </div>
                        <div class="col-xs-4">
                            Material:
                        </div>
                        <div class="col-xs-2">
                            <input type="text" id="num_of_cycles" style="height: 20px; width: 100px; margin-left: -25px">
                        </div>
                        <div class="col-xs-4">
                            SOC min:
                        </div>
                        <div class="col-xs-2">
                            <input type="text" id="cop_file" style="height: 20px; width: 100px; margin-left: -25px" disabled="disabled">
                        </div>
                    </div>
                    </div>

Obv 我已经搜索了堆栈溢出,我尝试了边距底部和之前给出的其他提示。我想无论以前的实习生是谁,都写得正确。

每次我尝试其中一种方法时,最终都会发生参数混乱的情况。见下图。 enter image description here

javascript html angularjs apache angular-ui-bootstrap
1个回答
0
投票

我猜列内容会溢出/换行到下一行,在输入行之间插入空格,解决方案是增加标签列的大小,下面的工作示例!

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div class="row" >
      <div class="col-3">
          Fuel temp probe cap:
      </div>
      <div class="col-3">
          <input type="text" id="temp_prob" />
      </div>
      <div class="col-3">
          Canister:
      </div>
      <div class="col-3">
          <input type="text" id="purge_vol" />
      </div>
      <div class="col-3">
          Fuel Tank:
      </div>
      <div class="col-3">
          <input type="text" id="battery_volt" />
      </div>
      <div class="col-3">
          Manufacture:
      </div>
      <div class="col-3">
          <input type="text" id="battery_cap" />
      </div>
      <div class="col-3">
          Manufacture:
      </div>
      <div class="col-3">
          <input type="text" id="rec_energy" />
      </div>
      <div class="col-3">
          Part Number:
      </div>
      <div class="col-3">
          <input type="text" id="soc_min" />
      </div>
      <div class="col-3">
          Material:
      </div>
      <div class="col-3">
          <input type="text" id="num_of_cycles" />
      </div>
      <div class="col-3">
          SOC min:
      </div>
      <div class="col-3">
          <input type="text" id="cop_file" />
      </div>
    </div>
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

堆栈闪电战

© www.soinside.com 2019 - 2024. All rights reserved.