Question

我在JavaScript中创建一个HTML表单并且它可以工作，但是两个按钮：取消和提交是在单独的行（一个在另一个之上）。如何使它们水平对齐？

以下是我的代码：

var new_comment_form = "<form id='add_comment' method='post'><textarea name='problem_comment' cols=60 rows=6 id='problem_comment'>" + problem_comment_text + "</textarea><input type='hidden' id='problem_id' name='problem_id' value='" + problem_id + "' /><input type='hidden' id='problem_comment_id' value='" + problem_comment_id + "' /><input type='submit' class='button' value='Edit Message' /><input type='button' class='button' id='cancel_comment' data-problem_id='" + problem_id + "' value='Cancel' /></form>";

顺便说一下，它看起来非常凌乱:)人们通常如何做这种事情以使它更干净？

谢谢！

Answer 1

http://jsfiddle.net/G2qsp/1/

据我所知，他们在同一条线上：P

使它更干净的正常方法（至少，就像我这样做）就是把它放在每行末尾带+的新行。

又名：

var new_comment_form = 
"<form id='add_comment' method='post'>"+
  "<textarea name='problem_comment' cols=60 rows=6 id='problem_comment'>"+
      problem_comment_text +
  "</textarea>"+
  "<input type='hidden' id='problem_id' name='problem_id' value='" + problem_id + "' />"+
  "<input type='hidden' id='problem_comment_id' value='" + problem_comment_id + "' />"+
  "<input type='submit' class='button' value='Edit Message' />"+
  "<input type='button' class='button' id='cancel_comment' data-problem_id='" + problem_id + "' value='Cancel' />"+
"</form>";

编辑：如果您仍然遇到一些对齐问题，这大概就是您想要使用浮点数 http://jsfiddle.net/G2qsp/2/

现在，在有人攻击我使用clear之前逃跑：两个......

Answer 2

您可以使用两种方式解决此问题， 1）使用带有两列的表，一列包含第一个按钮，另一列包含第二个按钮。 2）您还可以使用值为负的margin-top样式。

如何在同一水平对齐上放两个按钮？

2 个答案: