HTML/CSS- Button alignment

Question

I'm new to HTML/CSS, so I'm still working out the tags and their uses... This is what my page looks like atm.

This is the goal- sorry for the bad paint drawing..

I want to increase the size of the buttons, "+" and "-", and make them closer to the dropdown, and to the right of the dropdown...Currently, I can only get it this near.

<button type="button" class="button6" id="add_service">+</button>
<button type="button" class="button6" id="delete_row">-</button>

This is the HTML code I have for it. I have a header in CSS to link to, and I've been playing around with it, but I can't get the alignment right...How can I get it to look similar to my paint drawing?

CSS :

.button6 {

      text-align: right;
      content: "\00a0 \00a0 ";


}

There is not enough context of the containing HTML and CSS to answer this question easily (if at all), please provide the context of the Dropdown, the buttons, as well as the CSS in play. — Ryan Leach, Jun 04 '18 at 04:42
https://stackoverflow.com/questions/16552397/css-how-to-add-white-space-before-elements-content. I looked at this, this is all I have for CSS atm- a "content: "\00a0 \00a0 ". — R.S Mohan Aravind, Jun 04 '18 at 04:47

score 2 · Answer 1 · answered Jun 04 '18 at 04:49

Here is my solution Its not perfect, but it will give you starting point

.parent {
  width: 150px;
}

select {
  width: 100%;
  margin-bottom:5px;
}

.btns {
  text-align: right;
}

<div class="parent">
  <select>

  </select>
  <div class="btns">
    <button type="button" class="button6" id="add_service">+</button>
    <button type="button" class="button6" id="delete_row">-</button>
  </div>
</div>

HTML/CSS- Button alignment

1 Answers1