Question

我有一个页面有两个提交按钮用于不同的目的，我在表内分配，我试图将它对齐在同一行。

html是

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

上面会产生同一行中的按钮和单词，我希望它发生在同一行。

似乎“涉及（输入名称）或（从列表中添加）”，

我可能知道怎么做。

谢谢，

Answer 1

您可以使用<div>而不是表格。为按钮指定CSS值display:inline-block;

Answer 2

你的HTML很乱，不需要那些元素

<td>
  <form>Involved: <input type="submit" value="Add from list"> or <input type="submit" value="Type a name"></form>
</td>

Answer 3

试试这个css

div#frm *{display:inline}

和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>

Answer 4

首先，您的代码无效，因为中间有一个结束div块。

然后，表单是一个块元素，这就是为什么您的浏览器只会在新行上显示它（至少没有应用任何样式）。

所以你可以做的是使它成为具有正确性的内联元素“display：inline-block”。对于你的段落也是如此，如果你想要添加它，它也是不需要的，因为它也是一个块元素，请确保应用这种样式并使其内联。

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

有关inline vs block elements here

的更多信息

Answer 5

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

Answer 6

<!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>

如何在同一行上对齐两个提交按钮

6 个答案: