Почему эти кнопки формы HTML не отображаются встроенными?

Я пытаюсь получить кнопки формы для отображения в строке подряд. Я использую CSS для стилизации вывода HTML из чужого скрипта, поэтому я должен понимать структуру в HTML. Я не могу изменить это на то, что я понимаю. Смотрите код ниже.

Какие стили по умолчанию для этих элементов используются таким образом? У меня сложилось впечатление, что это был блочный элемент и он был встроенным. Независимо от того, как я пытаюсь стилизовать это с помощью CSS, я не могу изменить их положение (кроме как с помощью float, которого я хотел бы избежать в этом случае). Помогите! Спасибо:)

 <html>
 <head></head>
 <body> 

 <div class="comment_buttons">
    <form class="button discussion__edit" method="get" action="/doku.php#discussion__comment_form">
      <div class="no">
        <input type="hidden" name="id" value="start" />
        <input type="hidden" name="do" value="show" />
        <input type="hidden" name="comment" value="edit" />
        <input type="hidden" name="cid" value="f871dd5933621b4fe9070bab542ff3ea" />
        <input type="submit" value="Edit" class="button" title="Edit" />
      </div>
    </form>
            <form class="button discussion__toogle" method="get" action="/doku.php">
      <div class="no">
        <input type="hidden" name="id" value="start" />
        <input type="hidden" name="do" value="show" />
        <input type="hidden" name="comment" value="toogle" />
        <input type="hidden" name="cid" value="f871dd5933621b4fe9070bab542ff3ea" />
        <input type="submit" value="Hide" class="button" title="Hide" />
      </div>
    </form>
            <form class="button discussion__delete" method="get" action="/doku.php">
      <div class="no">
        <input type="hidden" name="id" value="start" />
        <input type="hidden" name="do" value="show" />
        <input type="hidden" name="comment" value="delete" />
        <input type="hidden" name="cid" value="f871dd5933621b4fe9070bab542ff3ea" />
        <input type="submit" value="Delete" class="button" title="Delete" />
      </div>
    </form>
          </div>
</body>
</html>
Источник

1 ответ

Решение

Элементы формы являются встроенными, но форма и div внутри формы являются блочными элементами.

Поэтому измените их на встроенные:

form, form div { display: inline; }

http://jsfiddle.net/fbCgk/

Источник
Другие вопросы по тегам