在 IPython Notebooks 中对齐 TextBox 小部件答案

【问题标题】：Aligning TextBox Widgets in IPython Notebooks在 IPython Notebooks 中对齐 TextBox 小部件
【发布时间】：2014-12-19 11:27:15
【问题描述】：

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

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

这是一个简单的 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 notebook，但它适用于整个小部件，而不是单个标签和字段。

【问题讨论】：

标签： python html css user-interface ipython

【解决方案1】：

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

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

【讨论】：