Python Dash：如何将用户输入与其他文本显示在同一行

原代码中html.P和html.Div都是块级元素，默认会独占一行，导致两段文本分行显示。以下两种方法可实现固定文本与用户输入文本的同行组合，同时满足固定文本置于回调定义之外的需求：

方法1：使用行内元素html.Span #

html.Span是行内元素，默认不会换行，将固定文本和动态输出都用Span包裹并放在同一容器内即可实现同行显示：

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
app = dash.Dash()

app.layout = html.Div([
    dcc.Input(id='user-input', type='text', placeholder='Enter a string...'),
    html.Br(),
    html.Div([
        html.Span("Here's an additional paragraph for context: "),
        html.Span(id='output-text')
    ])
])

@app.callback(
    Output('output-text', 'children'),
    [Input('user-input', 'value')]
)
def update_text(input_value):
    return f'This is the text: {input_value}' if input_value else ''

app.run_server(debug=True)

方法2：通过CSS修改块级元素显示属性 #

如果需要保留原有的html.P或html.Div标签，可通过style属性将元素设置为inline-block，强制它们在同一行显示：

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
app = dash.Dash()

app.layout = html.Div([
    dcc.Input(id='user-input', type='text', placeholder='Enter a string...'),
    html.Br(),
    html.Div([
        html.P("Here's an additional paragraph for context:", style={'display': 'inline-block', 'margin-right': '8px'}),
        html.Div(id='output-text', style={'display': 'inline-block'})
    ])
])

@app.callback(
    Output('output-text', 'children'),
    [Input('user-input', 'value')]
)
def update_text(input_value):
    return f'This is the text: {input_value}' if input_value else ''

app.run_server(debug=True)

注：回调中添加if input_value else ''是为了避免用户未输入内容时，页面显示None。

内容的提问来源于stack exchange，提问作者Sos