html - 如何为我的输入获得一个中间位置并且跨度在左侧

Question

如何为我的输入获得一个中间位置并且所有跨度都在左侧。

我希望我的输入位于页面中间。另一个跨度（左/右）将匹配输入通道

我使用 bootstrap-4 中的一些类

CSS

span {
    color: oldlace;
}

input {
    position: relative;
    display: inline-block;
}

HTML

    <form (submit)="submit()">

      <div id="egg" class="invisible">
        <span class="p-1">Egg</span>
        <input class="text-center rounded-pill border border-danger p-1 m-1" type="number" title="Egg" name="egg"
          placeholder="gram" [(ngModel)]="protein.egg">
        <!-- <span class="p-1"> size</span><br> -->
      </div>

      <div id="bread" class="invisible">
        <span class="p-1">Bread</span>
        <input class="text-center rounded-pill border border-danger p-1 m-1" type="number" title="Bread" name="bread"
          placeholder="gram" [(ngModel)]="protein.bread">
        <!-- <span class="p-1"> slices , 30g pre slice</span><br> -->
      </div>

    </form>

标签： htmlcssbootstrap-4

Answer 1

您可以应用宽度span

.spanE {
    display: inline-block;
    width: 5rem;
}

<form (submit)="submit()">
	<div id="egg" class="invisible">
		<span class="p-1 spanE">Egg</span>
		<input class="text-center rounded-pill border border-danger p-1 m-1" type="number" title="Egg" name="egg"
		placeholder="gram" [(ngModel)]="protein.egg">
		<!-- <span class="p-1"> size</span><br> -->
	</div>

	<div id="bread" class="invisible">
		<span class="p-1 spanE">Bread</span>
		<input class="text-center rounded-pill border border-danger p-1 m-1" type="number" title="Bread" name="bread"
		placeholder="gram" [(ngModel)]="protein.bread">
		<!-- <span class="p-1"> slices , 30g pre slice</span><br> -->
	</div>
</form>