Django/HTML 表单输入对齐答案

【问题标题】：Django/HTML form input alignmentDjango/HTML 表单输入对齐
【发布时间】：2020-12-16 20:51:43
【问题描述】：

我正在尝试做一些非常简单的事情。我目前拥有的是这样的：

目前的代码是这样的：

{% extends 'base.html' %}
{% load static %}
{% block content %}
<style>
.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}
</style>
<div class='center'>
    <form action='.' method='POST'> {% csrf_token %}
        <div align="right">
            <input type="text" name='title' placeholder='Food title'/>
        </div>
        <div align='left'>
            <input type="text" name='q' placeholder='Search Image'/>
            <input type="submit" value='Search!'/> 
        </div>
        {% for image in images %}
            <img src="{% static 'img/search/' %}{{ image }}", alt=""/>
            <input type="radio" name="imageRadio" value={{image}}/>
            </br>
        {% endfor %}
            <input type="submit" value='Go!'/>
    </form>
</div>
{% endblock content %}

我的问题是，无论我尝试什么，我都无法让食物标题输入和搜索栏对齐。我想让它们分开，但在同一水平线上，而不是稍微高于另一条。

我怎样才能做到这一点？

【问题讨论】：

标签： html css django web alignment

【解决方案1】：

您可以通过几种方式来解决这个问题（当然）。你可以使用float（不是最好的主意），你可以考虑使用FlexBox。如今，Flexbox 得到了高度支持。

例子

{% extends 'base.html' %}
{% load static %}
{% block content %}
<style>
    .center {
      margin: auto;
      width: 50%;
      border: 3px solid green;
      padding: 10px;
    }
    .inputs {
        display: flex;
        justify-content: space-between;
    }
</style>

<div class='center'>
    <form action='.' method='POST'> {% csrf_token %}
        <div class="inputs">
            <div>
                <input type="text" name='title' placeholder='Food title'/>
            </div>
            <div>
                <input type="text" name='q' placeholder='Search Image'/>
                <input type="submit" value='Search!'> 
            </div>
        </div>
        {% for image in images %}
            <img src="{% static 'img/search/' %}{{ image }}", alt=""/>
            <input type="radio" id=image name="gender" value="male">
            </br>
        {% endfor %}
        <input type="submit" value='Go!'>
    </form>
</div>
{% endblock content %}

【讨论】：

【解决方案2】：

这归结为基本的 HTML 和 CSS。您的inputs 位于两个单独的divs 中，它们是块级元素，这意味着它们将各自占据页面上自己的“行”。虽然我们可以简单地更改这两个divs 的display，但我将直接跳到最佳实践，并建议您将inputs 放入共享div，并给他们一个@ flex的987654327@，然后用justify-content调整“间距”，如：

<style>
.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}
.my-inputs {
  display: flex;
  justify-content: space-between;
}
</style>


<div class="my-inputs">
    <input type="text" name='title' placeholder='Food title'/>
    <input type="text" name='q' placeholder='Search Image'/>
    <input type="submit" value='Search!'/>
</div>

【讨论】：