Question

所以我试图让我的按钮显示另一个按钮的左侧或右侧，而不是按钮的顶部/底部。我是所有这一切的新手，很想知道这一点。

这是我的代码，我可以应用什么来使它们向左/向右堆叠？

<form action="">
  <input type="submit" value="Contact me">
</form>

Answer 1

有很多方法可以做到这一点，但您可以尝试float css属性，如下所示：

＆＃13;

input[type="submit"]{

  float:left;
  display:inline-block;
}

input[type="button"]{

  float:right;
  display:inline-block;
}

＆＃13;

<form action="">
<input type="submit" value="Contact me">
<input type="button" value="another button">
</form>

＆＃13;

Answer 2

尝试研究CSS here中的float属性。您可以通过这样做来改变HTML文档的可视流程，例如

#button1 {
    float: right;
}
#button2 {
   float: left;
}

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div style="width: 50%;">
       <input id="button1" type="button" value="button 1">
       <input id="button2" type="button" value="button 2">
       <input id="button3" type="button" value="button 3">
    </div>
    </body>
  </html>

Answer 3

如果我正确地解决了您的问题，您的意思是说您希望将此表单中的按钮彼此相对而不是一个在另一个之下。根据我的说法，当您在此表单中添加另一个按钮时，它将仅显示在第一个按钮的侧面。但是，不要在按钮之间添加<br/>标记，甚至不要将它们放入单独的<div>标记中以下是我为您所做的代码示例：

<html>
<head>
    <title>Button Left/Right</title>
    <link src="style.css" rel="stylesheet" type="text/css"/>       //add this line if you want to add css otherwise ignore this line and remove from code
</head>
<body>
<form action="">
<input class="btn" type="submit" value="Contact me">            //observe I have given class to the buttons  
<input class="btn" type="submit" value="Contact me Button 2">
</form>
</body>
</html>

如果它不起作用，则在您拥有当前html文件的目录中创建以下style.css文件。在style.css文件中添加以下行：

.btn{
    display:inline-block;
}

使我的按钮左右而不是堆叠？

3 个答案: