html的一个div中左边是lable右边是文本框，怎么让lable上下居中

Posted 2023-03-24

<label style="float:left; line-heighe:25px;">左边</label>
<input type="text" style="float:left; height:25px; line-height:25px;" />

其实说的直白点就是一个浮动float:left;

参考技术A 在div中大哥line-height试试，还可以用margin ：auto auto； 都不行的话，就margin-top了，方法很多 参考技术B 设置行高line-height 为lable的高度本回答被提问者采纳 参考技术C valign:middle 这个css行不？ 参考技术D line-height:50px ??

Django 模板创建 div.selector 框

【中文标题】Django 模板创建 div.selector 框

【英文标题】：Django template create div.selector boxs

【发布时间】：2016-11-20 03:00:14

【问题描述】：

我正在使用 Django 1.9，在管理部分我看到了以下结构：

我想在我的模板中为表单实现一个这样的选择器——两个框，左边的一个填充了一些类对象。右边是空的，当我单击框之间的箭头时，项目会相应移动。最后在表单中，我希望能够对右侧框中的所选项目做一些事情。

我搜索了“html 选择器”，但没有任何好的结果。我该怎么做？

【参考方案1】：

好的，所以您没有针对上述问题的直接解决方案，因此您没有直接找到。

我能想到的一种可能的解决方案是通过使用 Javascript 进行前端操作。您可以执行以下操作：

在您的 html 中有两个不同的 div，比如“左框”和“右框”。现在，在您的 views.py 中，您返回要在左侧框中显示的项目列表，然后在 html 文件，您将它们显示在左侧框中。

现在是重要的部分。 您在左侧框中显示的列表必须是复选框输入类型（以便可以选择/选中或取消选中/取消选中单个项目）或任何其他选择输入类型。

现在您在左右框之间有了两个按钮。 因此，您将在 javascript 文件中为这两个按钮编写点击功能。

对于右箭头按钮，点击功能将检测左侧框中的所有选定项，并将隐藏/删除左侧框中的所有项目并将它们添加到正确的框中，即，您必须从 javascript 创建所有 div、li、复选框输入。

与左箭头按钮类似，点击功能会检测右侧框中所有选中的项目，将其从右侧框中隐藏/删除并添加到左侧框中。

然后最终会在底部有一个保存按钮，它将通过 GET 或 POST 提交此数据。但是由于您希望通过单击页面底部的SAVE来提交所有数据，这意味着左右框都将在一个FORM下。因此，您需要有一个通用的“名称”属性，例如左侧框项目的“左输入”和右侧框项目的“右输入”，因为只有“名称”和“值”对在任何html表单。

因此，在您的视图中，当您请求.GET 或 POST 时，您将获得一个只有两个键（“左输入”和“右输入”）的多值字典每个都有一个值列表。

然后你可以将 querydict 转换为 python dict 并用它做任何你想做的事情。

【讨论】：

模板是最简单的，可以立即安排... :p

不...这就是我发布这个问题的原因。它进入视图-> 表单-> template.html + javascript。所以....

知道了。那么views->form->template.html中的表单部分对你来说是必要的吗？我的意思是任何一天都可以拥有views->template.html（包含html 表单）。尽管您仍然可以使用 views->form->template.html 并使用 javascript 从表单中追加和删除项目，以便您能够在视图中使用 form-cleaned-data，但为此您还必须编写html froms 输入的 id 值与 forms.py 中的输入值相同，这会使事情复杂化。

我怎么做views->template.html（包含html表单）？？？我从官方网站学习Django。你能帮帮我吗？

是的，很简单。在您的 views.py 中，您将编写一个基于类的视图，并且您的类将是 TemplateView 类型。这是我的 web-app 的 view.py 之一 -> github.com/ankushrgv/notification/blob/master/apps/… 休息你可以查看 TemplateView 的官方 django 文档以获得更好的理解 -> docs.djangoproject.com/en/1.9/ref/class-based-views/base/…

【参考方案2】：

有一个直接的解决方案。

我使用 Django 管理小部件如下。

forms.py：

from django.contrib.admin.widgets import FilteredSelectMultiple
class AForm(forms.ModelForm):
class Meta:
    model = A
    fields = (
        'name', 'nickname', )
    widgets = 
        "name": FilteredSelectMultiple("name", is_stacked=False),
        "nickname": FilteredSelectMultiple("nickname", is_stacked=False),
    

a_template.html

<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="/static/admin/js/vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.min.js"></script>
<script type="text/javascript" src="/static/admin/js/urlify.js"></script>
<script type="text/javascript" src="/static/admin/js/prepopulate.min.js"></script>
<script type="text/javascript" src="/static/admin/js/vendor/xregexp/xregexp.min.js"></script>
<script type="text/javascript" src="/static/admin/js/SelectBox.js"></script>
<script type="text/javascript" src="/static/admin/js/SelectFilter2.js"></script>

<form role="form" action="" method="post" enctype="multipart/form-data">
    % csrf_token %
     form 
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-success">Save</button>
        </div>
    </div>
</form>

【讨论】：

这是一种解决方法，只要您使用 Django。