如何在 Jinja 中进行表单标签对齐答案

【问题标题】：How to do form label alignment in Jinja如何在 Jinja 中进行表单标签对齐
【发布时间】：2017-01-24 00:51:20
【问题描述】：

我的问题和这个很相似 Jinja has a "center" formatting option, but how about "right align"?

基本上，我想要这样的效果：

     something: 1
someotherthing: 3
  thelastthing: 2

但我想对齐“form.element.label”而不是“key”。我尝试使用相同的 rjust 函数。但是，我得到了

jinja2.exceptions.UndefinedError: 'wtforms.fields.core.Label object' 没有属性'rjust'

【问题讨论】：

你需要使用 jinja 吗？你可以改用 CSS 来对齐它吗？
@coralv 我明白了。谢谢。我对这些东西很陌生，所以你能快速告诉我如何在 CSS 中做到这一点吗？

标签： alignment jinja2

【解决方案1】：

我没有看到您的 HTML，但我希望 these 和两个 sites 之一应该具有右对齐元素所需的信息。

当您将 form.element.label 放入 HTML 代码时，您需要对它执行以下两项操作之一。您要么需要找到一种方法来识别标签（甚至可能是它所属的整个表单），以便添加一些能够抓取它的 CSS，或者您可以直接向其中添加 CSS 样式代码页面上的元素。我将给出一些使用表单对齐的例子，但如果你真的只想做标签，同样的想法也适用。

使用 CSS 类标识标签或表单

<style>
  .myform {
  float: right;
  }
</style>

<form class="myform" action="demo">
 <label for="demo">Demo</label>
 <input type="radio" name="demo" id="demo" value="demo">
</form>

使用 CSS 对齐任何标签或表单，使它们都右对齐

<style>
  form {
  float: right;
  }
</style>

<form action="demo">
 <label for="demo">Demo</label>
 <input type="radio" name="demo" id="demo" value="demo">
</form>

在标签或表单的代码中包含 CSS

<form action="demo" style="float: right;">
 <label for="demo">Demo</label>
 <input type="radio" name="demo" id="demo" value="demo">
</form>

请务必查看那些 W3 Schools 链接，因为除了 floating 元素之外，还有其他方法可以进行对齐。希望这能满足您的需求！

【讨论】：

您好，感谢您的意见。其实我之前查过w3学校的页面并没有找到解决办法。我已经稍微更新了我的问题。你能给我更多关于如何使用“浮动”来实现这种效果的细节吗？顺便说一句，我实际上发现我可以使用 table() 来实现这一点。
我知道你现在要做什么了。表格是做到这一点的一种好方法，您也可以使用float，但将元素放入divs 并使用CSS 右对齐div 内的文本可能更容易。