对齐IPython笔记本中的TextBox小部件 [英] Aligning TextBox Widgets in IPython Notebooks

问题描述

我想通过对齐输入字段使IPython笔记本更加美观。这些字段有一些描述符附加到它们，并且一些超过了最小字符限制。

I am trying to make an IPython notebook more aesthetic by aligning input fields. These fields have some descriptors attached to them, and a few go over the minimum character limit.

我想要文本输入框对齐，使左侧所有

I would like the text input boxes to be aligned such that the left side all align vertically.

这里是一个简单的ipython例子，

Here is a simple ipython example,

from IPython.html import widgets # Widget definitions
from IPython.display import display # Used to display widgets in the notebook
small_widget = widgets.FloatTextWidget(description="Small:")
short_widget = widgets.FloatTextWidget(description="Also Short:")
long_widget = widgets.FloatTextWidget(description="Loooooooong:")

container = widgets.ContainerWidget(children=[small_widget, 
                                              short_widget, long_widget])

display(container)

对于Looooooong小部件，标签显着地移动了输入框。我希望所有其他输入框也移动到正确的对齐方式。

You can see that for the Looooooong widget the label shifts the input box over considerably. I would like all of the other input boxes to also shift to the right to align.

有关如何正确对齐这些组件（标签，输入框）的任何建议FloatTextWidget？我查看了 IPython notebook 对齐小部件，但它适用于整个小部件，而不是单个标签和字段。

Any suggestions on how to properly align these components (label, input box) of the FloatTextWidget? I have looked at the IPython notebook on aligning widgets but it applies to an entire widget as a whole, not the individual label and field.

推荐答案

p>快速修复是通过使用 %% html 单元格更改CSS来增加标签宽度：

A quick fix is to increase the label widths by altering the CSS using an %%html cell:

%%html
<style>
.widget-hlabel {
    /* Horizontal Label */
    min-width      : 10ex;
}
</style>

这篇关于对齐IPython笔记本中的TextBox小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！