同一行上的HTML按钮

时间:2017-06-25 08:13:03

标签: html css html5

我有这个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>

3 个答案:

答案 0 :(得分:0)

只需添加以下代码

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

答案 1 :(得分:0)

&#13;
&#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;
&#13;
&#13;

答案 2 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;