为什么这些HTML表单按钮不显示内联?

I am trying to get form buttons to display inline in a row. I am using CSS to style HTML output from someone else's script, so I have to understand the structure in HTML. I can't change it to something I do understand. See the code below.

我正在尝试获取表单按钮来显示行中的内联。我正在使用CSS来样式化别人脚本的HTML输出，所以我必须理解HTML的结构。我不能把它变成我能理解的东西。请参见下面的代码。

What are the default styles for these elements when used in this way? I was under the impression that was a block element and was inline. No matter how I try to style this with CSS, I can't change their position (except with a float, which I'd like to avoid in this case). Help! Thank you :)

以这种方式使用这些元素的默认样式是什么?我的印象是，这是一个块元素，并且是内联的。无论我如何使用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>

1 个解决方案

#1

The form elements are inline, but the form and the div inside the form are block elements.

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

So change them to inline:

把它们改成内联

form, form div { display: inline; }

http://jsfiddle.net/fbCgk/

#1