为什么这些 HTML 表单按钮不能内联显示？答案

【问题标题】：Why won't these HTML form buttons display inline?为什么这些 HTML 表单按钮不能内联显示？
【发布时间】：2015-01-04 18:32:32
【问题描述】：

我正在尝试让表单按钮连续显示内联。我正在使用 CSS 来设置其他人脚本的 HTML 输出样式，因此我必须了解 HTML 中的结构。我不能把它改成我能理解的东西。请参阅下面的代码。

以这种方式使用时，这些元素的默认样式是什么？我的印象是它是一个块元素并且是内联的。无论我如何尝试使用 CSS 设置样式，我都无法更改它们的位置（除了浮动，我想在这种情况下避免使用）。帮助！谢谢你:)

 <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>

【问题讨论】：

标签： html css forms dokuwiki

【解决方案1】：

表单元素是内联的，但是表单和表单内的div是块元素。

所以将它们改为内联：

form, form div { display: inline; }

http://jsfiddle.net/fbCgk/

【讨论】：