how to align two submit button on same line
Question
I have a page with two submit button for different purpose,i assigned inside the table ,i am trying to align it in the same line.
html is
<td>
<div>
Involved:
<form>
<input type="submit" value="Add from list">
</form>
<p>or</p>
<form>
<input type="submit" value="Type a name">
</form>
</div>
</td>
The above will produce the buttons and words in same line,i want it to be happen in same line.
seem to be like "involved (type a name) or (add from list)",
may i know how to do this.
Thanks,
6 answers
solution1
5 2013-04-13 10:50:03
You can use <div> and not tables. Give the buttons a CSS value of display:inline-block;
solution2
2 ACCPTED 2013-04-13 10:47:14
You have a mess with your html, no need in that much elements
<td>
<form>Involved: <input type="submit" value="Add from list"> or <input type="submit" value="Type a name"></form>
</td>
solution3
2 2013-04-13 10:58:51
try this css
div#frm *{display:inline}
and html
<div id="frm">
Involved:
<form>
<input type="submit" value="Add from list">
</form>
<p>or</p>
<form>
<input type="submit" value="Type a name">
</form>
</div>
solution4
1 2013-04-13 10:50:14
First, you code wasn't valid because of an ending div block in the middle.
Then, form is a block element , that's why your browser will only display it on a new line (at least, without any style applied to it).
So what you can do is make it an inline element with the propriety "display: inline-block" . Same for you paragraph, it isn't needed, if you want to add it anyway, as it's also a block element, make sure to apply this style and make it inline.
<div>
Involved:
<form style="display:inline-block">
<input type="submit" value="Add from list">
</form> or
<form style="display:inline-block">
<input type="submit" value="Type a name">
</form>
</div>
More information on inline vs block elements here
solution5
1 2017-08-23 10:14:42
<div style="display: inline;" align="center">
<div style="float: left;">
<button style="color: white; padding: 15px 32px; text-align: center; text-decoration: none; border-radius: 4px; display: inline-block; font-size: 100%;">Hello</button>
</div>
<div style="float: right;">
<button style="color: white; background-color: #4caf50; padding: 15px 32px; text-align: center; text-decoration: none; border-radius: 4px; display: inline-block; font-size: 100%;">Hello</button>
</div>
</div>
solution6
0 2013-04-13 10:54:58
<!DOCTYPE html>
<html>
<head>
<style>
form {display: inline-block;}
</style>
</head>
<body>
<table>
<tr>
<td>
<form>
<label>Involved:</label>
<input type="submit" value="Add from list">
</form>
<form>
<label>or</label>
<input type="submit" value="Type a name">
</form>
</td>
</tr>
</table>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.