Question

我想将搜索按钮对齐到搜索栏旁边，但我不知道该怎么做。

HTML：

<div id="tmsearch">
 <span class="btn-toogle active"></span>
  <form id="tmsearchbox" method="get">
    <input type="hidden" name="controller" value="search"/>
    <input type="hidden" name="orderby" value="position"/>
    <input type="hidden" name="orderway" value="desc"/>
    <input class="tm_search_query form-control" type="text" id="tm_search_query" name="search_query" placeholder="What are you shopping for today ?"/>
    </form>
    <button>Search</button>
</div>

JSFIDDLE ==＆gt; https://jsfiddle.net/bpr6qmjt/3/

由于

Answer 1

使用CSS样式“display：inline”

<div id="tmsearch">
 <span class="btn-toogle active"></span>
  <form id="tmsearchbox" method="get" style="display:inline">
    <input type="hidden" name="controller" value="search"/>
    <input type="hidden" name="orderby" value="position"/>
    <input type="hidden" name="orderway" value="desc"/>
    <input class="tm_search_query form-control" type="text" id="tm_search_query" name="search_query" placeholder="What are you shopping for today ?"/>
    </form>
    <button style="display:inline">Search</button>
</div>

Answer 2

您可以轻松地将样式display:inline-block添加到表单元素。像这样

<form id="tmsearchbox" method="get" style="display:inline-block">

或者您可以按ID

添加它

form#tmsearchbox { display :inline-block }

Answer 3

您可以在CSS中设置表单的样式：

#tmsearchbox {display:inline;}

或者在表单标记中嵌入样式：

<form id="tmsearchbox" method="get" style="display:inline;">

Answer 4

<form id="tmsearchbox" method="get">
    <input type="hidden" name="controller" value="search">
    <input type="hidden" name="orderby" value="position">
    <input type="hidden" name="orderway" value="desc">
    <input class="tm_search_query form-control" id="myinput" type="text" name="search_query" placeholder="What are you shopping for today ?" style="
    float: left;
">
    </form>

如何在HTML中对齐搜索栏和搜索按钮？

4 个答案: