Question

我觉得这应该很容易搜索，但我找不到它。

我想要水平相邻的链接按钮：

<form action="http://google.com">
    <input class="button" type="submit" value="google">
    <input class="button" type="submit" value="yahoo">
</form>

这是有效的，除了它们都链接到雅虎。我需要每个按钮以不同方式链接。

<form action="http://google.com">
    <input class="button" type="submit" value="google">
</form>
<form action="http://yahoo.com">
    <input class="button" type="submit" value="yahoo">
</form>

这链接到不同的网址，但是它会在另一个网格上面呈现一个。

如何在同一行上制作它们？

Answer 1

你可以通过设置display: inline-block;来形成。

＆＃13;

form {
    display: inline-block;
}

＆＃13;

<form action="http://google.com">
    <input class="button" type="submit" value="google">
</form>
<form action="http://yahoo.com">
    <input class="button" type="submit" value="yahoo">
</form>

＆＃13;

Answer 2

这样的事情将是快速简便的方法：

<div style="overflow: hidden;">
    <form action="http://google.com" style="display: inline-block;">
        <input class="button" type="submit" value="google">
    </form>
    <form action="http://yahoo.com" style="display: inline-block;">
        <input class="button" type="submit" value="yahoo">
    </form>
</div>

Answer 3

这应该可以解决问题。

<head>
  <style type="text/css">
    form {
      float: left;
    }
  </style>
</head>

<body>
  <form action="http://www.google.com">
    <input class="button" type="submit" value="google">
  </form>

  <form action="http://www.yahoo.com">
    <input class="button" type="submit" value="yahoo">
  </form>
</body>

获取同一行上的链接按钮

3 个答案: