Question

我正在尝试将搜索按钮对齐到搜索框旁边，但按钮似乎在下方。这就是我得到的：

        <form action="{linkto page="search.php"}" method="get" id="searchFormTest">
           <input type="text" id="searchPhrase" name="searchPhrase" class="searchInputBox" value="{$lang.enterKeywords}" placeholder="Suchbegriff oder Bildnummer">
              <div style="display: inline;">
                <button type="submit" value="Submit">
                  <i style="font-size: 40px;" class="fa fa-search" aria-hidden="true"></i>
               </button>
              </div>
        </form>

Answer 1

将搜索输入浮动到左侧，将提交按钮浮动到左侧。准备。

input[type="search"],
button {
    float: left;
}

Answer 2

＆＃13;

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <div style="display: inline;">
  <input type="text"/>
         <span>   <button type="submit" value="Submit">
                <i style="font-size: 20px;" class="fa fa-search" aria-hidden="true"></i></span>
            </button>
        </div>

＆＃13;

这应该可以使图标位于搜索框旁边。

Answer 3

您的代码在jsfiddle中运行得很好。我认为你应该研究按钮继承的css样式。

<form method="get" id="searchFormTest">
    <input type="text" id="searchPhrase" name="searchPhrase" class="searchInputBox" placeholder="Suchbegriff oder Bildnummer">
    <div style="display: inline;">
        <button type="submit" value="Submit">
            <i style="font-size: 15px;" class="fa fa-search" aria-hidden="true">Search</i>
        </button>
    </div>
</form>

如何对齐搜索框旁边的按钮

3 个答案: