Question

我必须以单行显示这两个按钮。我尝试在表单元素中添加 style =＆＃34; {display：block-inline;}＆＃34;＆gt; ，但这对我来说也没有帮助。知道怎么做吗？

<html>
    <body>
        <div>
            <form >
              <input  type="submit" value="Button1" />
            </form>
            <form >
              <input  type="submit" value="Button2" />
            </form>
        </div>
    </body>
</html>

Answer 1

将两个表单放在自己的div中并在css中使用float。见小提琴示例：

<body>
<div>
    <div id=form1>
        <form >
            <input  type="submit" value="Button1" />
        </form>
    </div>

    <divid=form2>
    <form >
        <input  type="submit" value="Button2" />
    </form>
        </div>
</div>
</body>


#form1{
float:left;

}
#form2{
 float:left;   
}

https://jsfiddle.net/5mcffrv9/

Answer 2

内联块工作完美。看看这里。 Demo

HTML

<form >
  <input type="submit" value="Button1" />
</form>
<form >
  <input type="submit" value="Button2" />
</form>

CSS

form { display: inline-block; }

Answer 3

HTML

添加

<div class="name">

</div>

每个表格。

然后在css add

.name{
float: left;
}

或

.name{
display:inline-block;
}

检查这个小提琴

https://jsfiddle.net/kb86veLk/1/

使用内联块显示像这样 https://jsfiddle.net/kb86veLk/2/

可能是最好的方式。

Answer 4

你只需要这样做：

<强> CSS

form{display:inline;}

DEMO

如何在一行中以两种不同的形式显示输入按钮

4 个答案: