Home > Software engineering >  Add padding between items
Add padding between items

Time:12-11

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>

  • Related