python - 在 IPython 笔记本中对齐文本框小部件

标签 python html css user-interface ipython

我正在尝试通过对齐输入字段使 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)

您可以看到,对于 Loooooooong 小部件,标签将输入框大幅移动。我希望所有其他输入框也向右移动以对齐。

关于如何正确对齐 FloatTextWidget 的这些组件(标签、输入框)有什么建议吗?我看过 IPython notebook关于对齐小部件,但它适用于整个小部件,而不是单个标签和字段。

最佳答案

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

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

关于python - 在 IPython 笔记本中对齐文本框小部件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26534123/

相关文章:

javascript - 如何仅使用 CSS 切换 2 个 div 的位置?

python - 寻找交换列表中项目的函数

python - 谷歌 tensorflow 速成类(class)。表示问题 :Programming exercises Task 2: Make Better Use of Latitude

Python 测试数据框列的真/假条件并在新列中返回输出

html - Css 表格单元格规则和自动宽度溢出

html - 正确使用列表项中的视口(viewport)单位

html - 如何设置背景图像以在横向模式下在移动浏览器中动态定位

jQuery 脚本只能在一个页面上运行

jquery - 使用JQuery .click 和.toggle 收缩和扩大同心圆

python - pandas to_json - 以天而不是秒为单位返回时间戳