0

电流输出/布局

我是使用 python 来展示我的机器学习结果的新手。我正在尝试运行一个预测引擎，它接收用户的输入并通过在后端运行模型来为他们提供预测。

因此，为此我需要使用 plotly-dash 创建一个 UI。我已经创建了 UI，它工作正常，但是所有输入框都对齐在一列中，因为我想将它们对齐在多列中。

我尝试在“样式”下更改对齐方式，但这是一项非常手动的任务

app = dash.Dash(__name__)

app.layout = html.Div(
    [

        html.H1('AI for MI',style={'textAlign': 'center', 'color': 'Red'}),
        html.H1('Prediction Engine',style={'textAlign': 'center', 'color': 'Red'}),
        html.Div([html.P('Days To Maturity', style={"height": "auto","margin-bottom": "auto"}),dcc.Input(id="DaysToMaturity", type="number", value= '806.0',),]),
        html.Div([html.P('Days From Offer', style={"height": "auto","margin-bottom": "auto"}),dcc.Input(id="DaysFromOffer", type="number", value= '2879.0',),]),
        html.Div([html.P('Price', style={"height": "auto","margin-bottom": "auto"}),dcc.Input(id="Price", type="number", value= '105.033',),]),
        html.Div([html.P('Yield To Worst', style={"height": "auto","margin-bottom": "auto"}),dcc.Input(id="Yild2Worst", type="number", value= '3.414',),]),
        html.Div([html.P('Coupon Rate', style={"height": "auto","margin-bottom": "auto"}),dcc.Input(id="CouponRate", type="number", value= '5.8',),]),
        html.Div([html.P('Offering Amount', style={"height": "auto","margin-bottom": "auto"}),dcc.Input(id="OfferinAmnt", type="number", value= '450.0',),]),
        html.Div([html.P('Amount Outstanding', style={"height": "auto","margin-bottom": "auto"}),dcc.Input(id="AmntOut", type="number", value= '450.0',),]),
        html.Div([html.P('Offering Price', style={"height": "auto","margin-bottom": "auto"}),dcc.Input(id="OffPrice", type="number", value= '99.8',),]),
        html.Div([html.P('Offering Yield', style={"height": "auto","margin-bottom": "auto"}),dcc.Input(id="OffYild", type="number", value= '5.832',),]),
        html.Div([html.P('Principal Amount', style={"height": "auto","margin-bottom": "auto"}),dcc.Input(id="PrincAmnt", type="number", value= '1000.0',),]),
        html.Div([html.P('Duration', style={"height": "auto","margin-bottom": "auto"}),dcc.Input(id="Duration", type="number", value= '2.078',),]),
        html.Div([html.P('Convexity', style={"height": "auto","margin-bottom": "auto"}),dcc.Input(id="Convexity", type="number", value= '0.03',),]),
        html.Div([html.Button('Submit',style={"height": "auto","margin-bottom": "auto"}, id='button'),]),
        #html.Button('Submit', id='button'),
        html.Div(id="prediction-out", style={'color': 'black', 'font-style': 'italic', 'font-weight': 'bold'}),
    ]
)

你能建议我如何自动对齐输入框或在多列中对齐它们吗？

4

1 回答 1

1

你可以这样做：

app.layout = html.Div(
    [
        html.H1('AI for MI', style={'textAlign': 'center', 'color': 'Red'}),
        html.H1('Prediction Engine', style={'textAlign': 'center', 'color': 'Red'}),
        html.Div([
            html.Div([html.P('Days To Maturity', style={"height": "auto", "margin-bottom": "auto"}),
                      dcc.Input(id="DaysToMaturity", type="number", value='806.0', ), ]),
            html.Div([html.P('Days From Offer', style={"height": "auto", "margin-bottom": "auto"}),
                      dcc.Input(id="DaysFromOffer", type="number", value='2879.0', ), ]),
            html.Div([html.P('Price', style={"height": "auto", "margin-bottom": "auto"}),
                      dcc.Input(id="Price", type="number", value='105.033', ), ]),
            html.Div([html.P('Yield To Worst', style={"height": "auto", "margin-bottom": "auto"}),
                      dcc.Input(id="Yild2Worst", type="number", value='3.414', ), ]),
            html.Div([html.P('Coupon Rate', style={"height": "auto", "margin-bottom": "auto"}),
                      dcc.Input(id="CouponRate", type="number", value='5.8', ), ]),
            html.Div([html.P('Offering Amount', style={"height": "auto", "margin-bottom": "auto"}),
                      dcc.Input(id="OfferinAmnt", type="number", value='450.0', ), ]),
            html.Div([html.P('Amount Outstanding', style={"height": "auto", "margin-bottom": "auto"}),
                      dcc.Input(id="AmntOut", type="number", value='450.0', ), ]),
            html.Div([html.P('Offering Price', style={"height": "auto", "margin-bottom": "auto"}),
                      dcc.Input(id="OffPrice", type="number", value='99.8', ), ]),
            html.Div([html.P('Offering Yield', style={"height": "auto", "margin-bottom": "auto"}),
                      dcc.Input(id="OffYild", type="number", value='5.832', ), ]),
            html.Div([html.P('Principal Amount', style={"height": "auto", "margin-bottom": "auto"}),
                      dcc.Input(id="PrincAmnt", type="number", value='1000.0', ), ]),
            html.Div([html.P('Duration', style={"height": "auto", "margin-bottom": "auto"}),
                      dcc.Input(id="Duration", type="number", value='2.078', ), ]),
            html.Div([html.P('Convexity', style={"height": "auto", "margin-bottom": "auto"}),
                      dcc.Input(id="Convexity", type="number", value='0.03', ), ]),
        ], style=dict(display='flex', flexWrap='wrap', width=400)),
        html.Div([html.Button('Submit', style={"height": "auto", "margin-bottom": "auto"},
                              id='button'), ]),
        # html.Button('Submit', id='button'),
        html.Div(id="prediction-out",
                 style={'color': 'black', 'font-style': 'italic', 'font-weight': 'bold'}),
    ]
)

这会给你一些看起来像这样的东西：

在此处输入图像描述

之后，只需调整您想要的包含的宽度div，框将在其中自动重新组织。

于 2019-10-14T20:30:05.623 回答