0

I have text, input box, and btn-group consisting of two groups and I want them all display in single horizontal line. I am using block class as parent and putting inline-block displays under it in order to achieve what I describe above. But buttons get into new line.

My HTML:

<div class='block'>
    <div class='desc' style='display:inline-block; width:80px;'>
        Reply 1: 
    </div>  
    <div style='display:inline-block; width:calc(90% - 80px);'>
        <input type='text' class='form-control' placeholder='Answer Text'></input>
    </div>      
    <div style='display:inline-block; width:10%; text-align:right;'>
        <a class='btn defineBranching' href='#'>
            <i class='fa fa-random'></i>
        </a>
        <a class='btn deleteAnswerField' href='#'>
            <i class='fa fa-trash-o'></i>
        </a>
    </div>
</div>

The result looks like the folowing image: enter image description here

Any idea how to fix this?

UPDATE: This was whitespace issue. When you comment out new lines among children of block class, it fixes the issue.

Naib Baghirov
  • 35
  • 1
  • 5
  • comment out the space between the divs – Pete Sep 18 '17 at 14:10
  • You should float or use flexbox. When elements are inline the white space in the source document (HTML) gets interpreted into a single space. This ultimately makes the sum total of your element's width greater than you have specified. I can also see that you're using some Bootstrap classes on your form element. Why not use Bootstrap grid system and form classes to achieve what you're looking to do? – hungerstar Sep 18 '17 at 14:12
  • The duplicate answer correct one is dated keep scrolling and see that flex is the best answer in this modern coding - `display: flex` – Riskbreaker Sep 18 '17 at 14:19
  • Thanks @hungerstar, it was whitespace issue. I tried using Bootstrap grid system but it was also giving some issues. Now it is fixed anyways. – Naib Baghirov Sep 19 '17 at 17:08

0 Answers0