I use this code to display label and drop down:
const exchangeid = {
display: "inline-block",
};
const exchangeidsearch = {
display: "inline-block",
paddingLeft: "10px",
};
.......
<th className="hand">
<div style={exchangeid} onClick={sort('pair')}>
Exchange Id <FontAwesomeIcon icon="sort" />
</div>
<div style={exchangeidsearch}>
Filter
<select>
<option>5</option>
<option>5</option>
<option>5</option>
<option>5</option>
<option>5</option>
</select>
</div>
</th>
How I can space between text Filter
and select drop down?
CodePudding user response:
Do you want to add space between the text 'filter' and the select element? You should probably wrap the filter in span
(or a div
or anything more relevant). Then you can add simple margin-right
to your span
:
.exchangeid {
display: inline-block;
}
.exchangeidsearch {
display: inline-block;
padding-left: 10px;
}
.text {
margin-right: 20px;
}
<th >
<div onClick={sort('pair')}>
Exchange Id <FontAwesomeIcon icon="sort" />
</div>
<div >
<span >Filter</span>
<select>
<option>5</option>
<option>5</option>
<option>5</option>
<option>5</option>
<option>5</option>
</select>
</div>
</th>