Python 如何在dash应用程序中自动对齐输入框？

当前输出/布局

我还不熟悉使用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'}),
    ]
)

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

您可以这样做：

app.layout=html.Div(
[
H1（'AI for MI'，style={'textAlign'：'center'，'color'：'Red'}），
H1（'Prediction Engine'，style={'textAlign'：'center'，'color'：'Red'}），
html.Div([
Div（[html.P（'Days To Maturity'，style={“height”：“auto”，“margin bottom”：“auto”}），
dcc.Input（id=“DayToTurity”，type=“number”，value='806.0'，），]），
Div（[html.P（'Days From Offer'，style={“height”：“auto”，“margin bottom”：“auto”}），
dcc.Input（id=“DaysFromOffer”，type=“number”，value='2879.0'，），]），
Div（[html.P（'Price'，style={“height”：“auto”，“margin bottom”：“auto”}），
dcc.输入（id=“Price”，type=“number”，value='105.033'，），]，
Div（[html.P（'Yield To best'，style={“height”：“auto”，“margin bottom”：“auto”}），
dcc.Input（id=“yild2best”，type=“number”，value='3.414'，），]，
Div（[html.P（'票面利率'，样式={“高度”：“自动”，“保证金底部”：“自动”}），
dcc.Input（id=“CouponRate”，type=“number”，value='5.8'，），]，
Div（[html.P（'offingamount'，style={“height”：“auto”，“margin bottom”：“auto”}），
dcc.Input（id=“OfferinAmnt”，type=“number”，value='450.0'，），]，
Div（[html.P（'Amount Understanding'，style={“height”：“auto”，“margin bottom”：“auto”}），
dcc.Input（id=“AmntOut”，type=“number”，value='450.0'，），]，
Div（[html.P（'offing Price'，style={“height”：“auto”，“margin bottom”：“auto”}），
dcc.输入（id=“OffPrice”，type=“number”，value='99.8'，），]，
Div（[html.P（'offingyield'，style={“height”：“auto”，“marginbottom”：“auto”}），
dcc.Input（id=“OffYild”，type=“number”，value='5.832'，），]，
Div（[html.P（'primary Amount'，style={“height”：“auto”，“margin bottom”：“auto”}），
dcc.Input（id=“PrincAmnt”，type=“number”，value='1000.0'，），]，
Div（[html.P（'Duration'，style={“height”：“auto”，“margin bottom”：“auto”}），
dcc.输入（id=“Duration”，type=“number”，value='2.078'，），]，
Div（[html.P（'凸面'，样式={“高度”：“自动”，“边距底部”：“自动”}），
dcc.Input（id=“凸面”，type=“数字”，value='0.03'，），]），
]，style=dict（display='flex'，flexWrap='wrap'，width=400）），
Div（[html.Button（'Submit'，style={“height”：“auto”，“margin bottom”：“auto”}，
id='button'），]），
#按钮（'Submit'，id='Button'），
html.Div（id=“预测输出”，
样式={'color'：'black'，'font style'：'italic'，'font-weight'：'bold'}），
]
)

这会给你一些类似的东西：

之后，只需调整包含

div

的宽度，框就会在其中自动重新组织