Question

所以我正在使用Foundation，我正在尝试将搜索栏和搜索按钮对齐。我已经尝试将它们放入一个容器中，并分别左右浮动，但这并没有起作用。

这就是现在的样子：https://gyazo.com/59a22c3c9cd849b1dd9fec6bb9df6bd5

这是HTML：

  <div class="top-bar-right">
  <ul class="menu">
  <form method="GET" action="">

  <li><input type="text" align="middle" name="search" value="{{ request.GET.search }}"placeholder="Search by Title"></input></li>
  <li><button type="button input" class="button">Search</button></li>

  </form>

</ul>
</div>

但我希望他们能够并肩。

感谢您的帮助！

编辑：忘记添加我的HTML！

Answer 1

一种方法是使用 span ，
li 是块元素，
因此，使用 span 将帮助您使元素内联。

将以下代码复制并保存为Html文件，例如 - demo.html
并在浏览器上打开它。

试试这个 -

<html>
    <body>
        <div class="top-bar-right">
            <form method="GET" action="">
                <span>
                    <input type="text" align="middle" name="search" value="{{ request.GET.search }}"placeholder="Search by Title">
                    </input>
                </span>
                <span>
                    <button type="button input" class="button">
                        Search
                    </button>
                </span>
            </form>
        </div>
    </body>
</html>

注意 - 我已删除您的 ul 标记，它有一个css类＆＃34;菜单＆＃34; ，不确定你的代码是否使用它。

Answer 2

默认情况下，每个订单项（li）都会填充其容器的宽度。要并排显示它们，您应该在订单项上使用 display：inline-block 。

Answer 3

您可以使用Foundation的inline-labels-and-buttons：

执行此操作

<div class="top-bar-right">
  <ul class="menu">
    <li>
      <form method="GET" action="">
        <div class="input-group">
          <input class="input-group-field" type="text" name="search" value="{{ request.GET.search }} " placeholder="Search by Title">
          <div class="input-group-button">
            <input type="submit" class="button" value="Submit">
          </div>
        </div>
      </form>
    </li>
  </ul>
</div>

JSFiddle example

基础 - 尝试将搜索栏和搜索按钮对齐

3 个答案: