Why won't these HTML form buttons display inline?
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 :)
<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>
Answer
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; }