Как выровнять текст, поле ввода, btn-group в одну горизонтальную линию

У меня есть текст, поле ввода и btn-группа, состоящая из двух групп, и я хочу, чтобы все они отображались в одной горизонтальной линии. Я использую класс блока как родительский и помещаю показы встроенного блока под ним, чтобы достигнуть того, что я описал выше. Но кнопки попадают в новую строку.

Мой 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>  

Результат выглядит следующим образом:

Есть идеи, как это исправить?

ОБНОВЛЕНИЕ: Это было проблемой пробела. Когда вы закомментируете новые строки среди дочерних блоков класса, это решает проблему.

0 ответов

Другие вопросы по тегам