Question

我在Django模板中有这个HTML：

<div id = "search_form">
        <form action="" method="get" id = "search-form">
            {% csrf_token %}
            {{ form.as_p }}
            {{ form.media }}
        </form>
        <button class="btn btn-primary" id="search_submit" name = "search_submit" type="submit" value = "submit" ><span class="glyphicon glyphicon-search"></span></button>
</div>

如何使搜索栏和按钮内联？这不起作用：

#search_submit {
    display: inline;
}

Answer 1

由于你使用的是bootstrap，试试这个（顺便说一句，按钮应该在表单标签内）：

<div id = "search_form">
  <form action="" method="get" id = "search-form">
   {% csrf_token %}

    <div class="col-xs-6">
     {{ form.as_p }}
     {{ form.media }}
   </div>
   <div class="col-xs-6">
      <button class="btn btn-primary" id="search_submit" name = "search_submit" type="submit" value = "submit" ><span class="glyphicon glyphicon-search"></span></button>
    </div>
  </form>
</div>

Answer 2

有效的解决方案：

<div id = "search_form">
    <div class="input-group">
        <form action="" method="get" id = "search-form">
            {% csrf_token %}

            <div class="col-xs-6">
                {{ form.as_p }}
                {{ form.media }}
            </div>
            <div class="col-xs-6">
                <span class="input-group-btn">
                    <button class="btn btn-primary" id="search_submit" name = "search_submit" type="submit" value = "submit" ><span class="glyphicon glyphicon-search"></span></button>
                </span>
            </div>
        </form>
    </div>
</div>

CSS：Django按钮和搜索栏内联

2 个答案: