Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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.

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

Ryan

CODE

 <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>
share|improve this question

1 Answer

up vote 1 down vote accepted

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

So change them to inline:

form, form div { display: inline; }

http://jsfiddle.net/fbCgk/

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.