css div向右移动而不是向左移动

9gm1akwq  于 5个月前  发布在  其他
关注(0)|答案(2)|浏览(77)

我有多个div,它被堆叠成行,每个都有两个div。
但是div没有正确对齐,并且向右移动,而不是向左。

<div className="col-md-6 adminForm borderItem" >
      <label htmlFor="description">Date Added</label><span className='errorMsg'>  {fuelStock.addedDttmError}</span>
      <DatePicker selected={addedDTTM} placeholderText="Select a date" timeInputLabel="Time:" name="added_dttm" id="added_dttm" className="form-control" onChange={date => handleDttmOfSale(date)} dateFormat="dd/MM/yyyy h:mm aa" showTimeInput />
    </div>

    <div className="col-md-6 adminForm borderItem">
      <label htmlFor="volume">Fuel Price</label><span className='errorMsg'>  {fuelStock.fuelPriceError}</span>
      <NumberInput autoComplete="off" id="fuelPrice" name="fuelPrice" isDecScaleEnabled={true} decimalScale={2}
        value={fuelStock.fuelPrice} className="form-control"
        onChange={(value) => handleInputChange(value, "fuelPrice")}></NumberInput>
    </div>
    <div className="col-md-6 adminForm borderItem" style={{position:'relative'}}>
      <label htmlFor="commission">commission</label><span className='errorMsg'>  {fuelStock.commissionError}</span>
      <NumberInput autoComplete="off" id="commission" name="commission" isDecScaleEnabled={true} decimalScale={2}
        value={fuelStock.commission} className="form-control"
        onChange={(value) => handleInputChange(value, "commission")}></NumberInput>
    </div>

.adminForm {
   float: left;
   padding-top: 10px;
 }

字符集
但我得到如下


的数据
如何对齐移动div到左边,我知道上面已经占用了一些空间,但我需要移动到左边,我尝试了位置和浮动:左,但没有工作

368yc8dk

368yc8dk1#

正如我所看到的,你正在使用 Bootstrap ,所以你不需要为左添加任何额外的样式,只要按照 Bootstrap 的结构,你就会得到你想要的,就像这样

<div class="container">
 <div class="row">
  <div class="col-md-6 mb-3">first div</div>
  <div class="col-md-6 mb-3">second div</div>
  <div class="col-md-6 mb-3">third div</div>
  <div class="col-md-6 mb-3">fourth div</div>
 </div>
</div>

字符集
使用mb-3class作为保证金,您不需要为您的代码额外添加adminForm样式,它将像这样工作,希望您在代码上方添加容器和行,以获得容器和行的样式

注意:在使用col类之前要添加container和row

<div className="col-md-6  borderItem" >
  <label htmlFor="description">Date Added</label><span className='errorMsg'>  {fuelStock.addedDttmError}</span>
  <DatePicker selected={addedDTTM} placeholderText="Select a date" timeInputLabel="Time:" name="added_dttm" id="added_dttm" className="form-control" onChange={date => handleDttmOfSale(date)} dateFormat="dd/MM/yyyy h:mm aa" showTimeInput />
</div>

<div className="col-md-6  borderItem">
  <label htmlFor="volume">Fuel Price</label><span className='errorMsg'>  {fuelStock.fuelPriceError}</span>
  <NumberInput autoComplete="off" id="fuelPrice" name="fuelPrice" isDecScaleEnabled={true} decimalScale={2}
    value={fuelStock.fuelPrice} className="form-control"
    onChange={(value) => handleInputChange(value, "fuelPrice")}></NumberInput>
</div>
<div className="col-md-6  borderItem">
  <label htmlFor="commission">commission</label><span className='errorMsg'>  {fuelStock.commissionError}</span>
  <NumberInput autoComplete="off" id="commission" name="commission" isDecScaleEnabled={true} decimalScale={2}
    value={fuelStock.commission} className="form-control"
    onChange={(value) => handleInputChange(value, "commission")}></NumberInput>
</div>

4bbkushb

4bbkushb2#

要将div向左对齐,您可以使用以下CSS:

.adminForm {
  float: left;
  padding-top: 10px;
  clear: left;
}

字符集
clear: left;属性将防止div包围浮动到左侧的其他元素。
下面是CSS的分解:

  • float: left;:这个属性将div浮动到左边,允许它移动到其他元素的左边。
  • padding-top: 10px;:这个属性在div的顶部添加10个像素的填充,在div和它上面的元素之间创建一些空间。
  • clear: left;:这个属性防止div包围其他浮动到左边的元素。

您也可以使用margin-left属性将div向左移动。例如:

.adminForm {
  float: left;
  padding-top: 10px;
  margin-left: 10px;
}


margin-left属性将在div的左侧添加10个像素的空间,将其向左移动。
希望这对你有帮助!

相关问题