2

Добрый день.

Есть поле для ввода input с классом string required ctrlenter expanding, после него следом добавлены две кнопки вверх и вниз. На данный момент эти кнопки отображаются после поля ввода на следующей строке, а необходимо чтобы они шли в ряд в месте с ним. Какие стили необходимо прописать, чтобы это реализовать?

    <div class="poll_item">
      <div class="control-group string required blog_post_poll_poll_items_answer">
        <div class="controls"><input class="string required ctrlenter expanding" display="inline" id="  blog_post_poll_attributes_poll_items_attributes_0_answer" margin="0" name="blog_post[poll_attributes][poll_items_attributes][0][answer]" placeholder="Введите вариант ответа" size="50" type="text">
        </div>
    </div>
      <button class="btn btn-bg" display="inline" id="up_id" name="button" type="button">вверх</button>
      <button class="btn btn-bg" display="inline" id="down_id" name="button" type="button">вниз</button>
      <input id="blog_post_poll_attributes_poll_items_attributes_0__destroy" name="blog_post[poll_attributes][poll_items_attributes][0][_destroy]" type="hidden" value="false"><a href="#" class="remove_fields dynamic" data-wrapper-class="poll_item">удалить</a>
    </div>

1
  • display: inline-block
    – lexxl
    14 апр 2016 в 10:10

1 ответ 1

3

.control-group, button, input {
  display: inline-block;
}
<div class="poll_item">
  <div class="control-group string required blog_post_poll_poll_items_answer">
    <div class="controls"><input class="string required ctrlenter expanding" display="inline" id="  blog_post_poll_attributes_poll_items_attributes_0_answer" margin="0" name="blog_post[poll_attributes][poll_items_attributes][0][answer]" placeholder="Введите вариант ответа"
        size="50" type="text">
    </div>
  </div>
  <button class="btn btn-bg" display="inline" id="up_id" name="button" type="button">вверх</button>
  <button class="btn btn-bg" display="inline" id="down_id" name="button" type="button">вниз</button>
  <input id="blog_post_poll_attributes_poll_items_attributes_0__destroy" name="blog_post[poll_attributes][poll_items_attributes][0][_destroy]" type="hidden" value="false"><a href="#" class="remove_fields dynamic" data-wrapper-class="poll_item">удалить</a>
</div>

6
  • спасибо. а что вы изменили? 14 апр 2016 в 10:13
  • @StefanHansch, он добавил display: inline-block к элементам 14 апр 2016 в 10:24
  • @StefanHansch добавил стили, в самом верху .control-group, button, input { display: inline-block;} . если ответ вам подходит, пометьте его принятым нажатием галочки напротив ответа слева
    – lexxl
    14 апр 2016 в 10:45
  • у вас везде стоит display="inline". Или inline и inline-block одно и тоже? 14 апр 2016 в 11:28
  • это не у меня стоит, а у вас) я html не изменял, только добавил css. про это свойство можно почитать вот тут: свойство display
    – lexxl
    14 апр 2016 в 11:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.