在IPython Notebook中对齐文本框小部件

Question

我正在尝试通过对齐输入字段来使IPython Notebook更美观。 这些字段附有一些描述符，有一些超出了最小字符限制。

我希望文本输入框对齐，使左侧全部垂直对齐。

这是一个简单的ipython示例，

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小部件，标签将输入框大大地移动了。 我希望所有其他输入框也移到右侧以对齐。

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

Answer 1

一个快速的解决方法是通过使用%%html单元格更改CSS来增加标签宽度：

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