3

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

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>

以上将在同一行中生成按钮和单词，我希望它发生在同一行中。

似乎就像“参与（输入名称）或（从列表中添加）”，

我可以知道怎么做吗？

谢谢，

4

6 回答 6

5

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

于 2013-04-13T10:50:03.543 回答
2

你的 html 乱七八糟，不需要那么多元素

<td>
  <form>Involved: <input type="submit" value="Add from list"> or <input type="submit" value="Type a name"></form>
</td>
于 2013-04-13T10:47:14.433 回答
2

试试这个 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>
于 2013-04-13T10:58:51.040 回答
2 
<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>
于 2017-08-23T10:14:42.613 回答
1

首先，您的代码无效，因为中间有一个结束 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>

更多关于内联元素和块元素的信息在这里

于 2013-04-13T10:50:14.137 回答
0 
<!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>
于 2013-04-13T10:54:58.060 回答