我有多个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到左边,我知道上面已经占用了一些空间,但我需要移动到左边,我尝试了位置和浮动:左,但没有工作
2条答案
按热度按时间368yc8dk1#
正如我所看到的,你正在使用 Bootstrap ,所以你不需要为左添加任何额外的样式,只要按照 Bootstrap 的结构,你就会得到你想要的,就像这样
字符集
使用mb-3class作为保证金,您不需要为您的代码额外添加adminForm样式,它将像这样工作,希望您在代码上方添加容器和行,以获得容器和行的样式
注意:在使用col类之前要添加container和row
型
4bbkushb2#
要将div向左对齐,您可以使用以下CSS:
字符集
clear: left;
属性将防止div包围浮动到左侧的其他元素。下面是CSS的分解:
float: left;
:这个属性将div浮动到左边,允许它移动到其他元素的左边。padding-top: 10px;
:这个属性在div的顶部添加10个像素的填充,在div和它上面的元素之间创建一些空间。clear: left;
:这个属性防止div包围其他浮动到左边的元素。您也可以使用
margin-left
属性将div向左移动。例如:型
margin-left
属性将在div的左侧添加10个像素的空间,将其向左移动。希望这对你有帮助!