Hassan Baig Hassan Baig - 2 months ago 7
CSS Question

Inlining two buttons - one inside a <form>, one outside

I have two buttons in an html template, one inside a form, the other outside of it. How do I style them via CSS such that they appear inline? Including

display: inline
in the second button doesn't work.

E.g. looking at the following snippet, how would
OK_1
and
OK_2
appear inline (using CSS only):



<form action="some_url" method="POST" enctype="multipart/form-data">
<!-- some form -->
<input class="button" type="submit" value="OK_1">
</form>
<button>OK_2</button>




Answer

TRY THIS:

Here is a runnable snippet.

form input[type="submit"] {
  display: inline-block;
  padding: 10px;
  background-color: #000000;
  color: #ffffff;
  float: left;
  margin:5px;
}
.button {
  display: inline-block;
  padding: 10px;
  background-color: #000000;
  color: #ffffff;
  border: 0;
  float: left;
  margin:5px;
}
<form action="some_url" method="POST" enctype="multipart/form-data">
  <!-- some form -->
  <input class="button" type="submit" value="OK_1">
</form>
<button class="button">OK_2</button>

You can customize all the styles above.

Comments