Question

我有这个html代码，它在浏览器中有三个按钮。如何将按钮放在同一行？（它们出现在不同的行上）。

    <form action="file:///C:/Users/andre/Desktop/home.html"/>
        <input type="submit" value="Home" />

</form>


     <form action="file:///C:/Users/andre/Desktop/players.html"/>
         <input type="submit" value="Players" />

 </form>

 <form action="file:///C:/Users/andre/Desktop/league.html"/>
    <input type="submit" value="League" />
</form>

Answer 1

只需添加以下代码

即可

<style>
    form { display : inline-block; } 
</style>

Answer 2

＆＃13;

input[type=submit]{cursor:pointer}
form input{float:left;margin:5px}

＆＃13;

    <form action="file:///C:/Users/andre/Desktop/home.html"/>
        <input type="submit" value="Home" />

</form>
     
     
     <form action="file:///C:/Users/andre/Desktop/players.html"/>
         <input type="submit" value="Players" />

 </form>

 <form action="file:///C:/Users/andre/Desktop/league.html"/>
    <input type="submit" value="League" />
</form>

＆＃13;

Answer 3

表单标签的默认显示值为block。如果你使它成为内联块，它将解决这个问题。

＆＃13;

<form style="display: inline-block;" action="file:///C:/Users/andre/Desktop/home.html">
  <input type="submit" value="Home" />
</form>
<form style="display: inline-block;" action="file:///C:/Users/andre/Desktop/players.html">
  <input type="submit" value="Players" />
</form>
<form style="display: inline-block;" action="file:///C:/Users/andre/Desktop/league.html">
  <input type="submit" value="League" />
</form>

＆＃13;

同一行上的HTML按钮

3 个答案: