Python 绘图划线:dcc.RadioItems垂直对齐

Python 绘图划线:dcc.RadioItems垂直对齐,python,html,css,radio-button,plotly-dash,Python,Html,Css,Radio Button,Plotly Dash,我想垂直对齐dash_core_components.RadioItems的所有选项。 根据,默认行为应包括放射性项选项的垂直对齐。如果要水平对齐选项,则必须指定: labelStyle={'display': 'inline-block'} 相反,作为默认行为,我得到一个水平对齐,我不知道指定什么作为显示项来获得放射性项选项的垂直对齐。 以下是我迄今为止的努力: import dash import dash_core_components as dcc import dash_html_c

我想垂直对齐dash_core_components.RadioItems的所有选项。 根据,默认行为应包括放射性项选项的垂直对齐。如果要水平对齐选项,则必须指定:

labelStyle={'display': 'inline-block'}
相反,作为默认行为,我得到一个水平对齐,我不知道指定什么作为显示项来获得放射性项选项的垂直对齐。 以下是我迄今为止的努力:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash()

app.layout = html.Div([dcc.RadioItems(id = 'input-radio-button',
                                      options = [dict(label = 'A', value = 'A'),
                                                 dict(label = 'B', value = 'B')],
                                      value = 'A'),
                       html.P(id = 'output-text')])


@app.callback(Output('output-text', 'children'),
              [Input('input-radio-button', 'value')])
def update_graph(value):
    return f'The selected value is {value}'


if __name__ == "__main__":
    app.run_server()
我得到的是:

我希望得到类似以下手动编辑图像的结果:

我找到了提到这个问题的地方。在这里,建议通过引用外部样式表来解决这个问题。如果可能的话,我想通过在放射性元素的定义中指定正确的选项来避免这种转变并解决它

版本信息:

Python  3.7.0
dash    1.12.0
plotly  4.7.0

您可以将labelStyle={'display':'block'}属性传递给dcc.RadioItems,以便垂直对齐不同的选项,但我建议您遵循Dash社区论坛中的建议,即始终链接Dash CSS文件。

您可以传递labelStyle={'display':'block}属性设置为dcc.radiotems,以便垂直对齐不同的选项,但我建议您遵循Dash社区论坛中的建议,即始终链接Dash CSS文件。

非常感谢!问题是我已经使用了这个样式表:app=dash.Dashexternal\u样式表=[dbc.themes.BOOTSTRAP]。我可以管理两个不同的样式表吗?是的,您可以包括多个SyleSheet,即使某些属性可能会相互覆盖。对于您的情况,如果我使用app=dash.Dashexternal_stylesheets=[dbc.themes.BOOTSTRAP,'https://codepen.io/chriddyp/pen/bWLwgP.css“]单选项选项将自动垂直对齐,即不添加标签样式={'display':'block'}。非常感谢!非常感谢你!问题是我已经使用了这个样式表:app=dash.Dashexternal\u样式表=[dbc.themes.BOOTSTRAP]。我可以管理两个不同的样式表吗?是的,您可以包括多个SyleSheet,即使某些属性可能会相互覆盖。对于您的情况,如果我使用app=dash.Dashexternal_stylesheets=[dbc.themes.BOOTSTRAP,'https://codepen.io/chriddyp/pen/bWLwgP.css“]单选项选项将自动垂直对齐,即不添加标签样式={'display':'block'}。非常感谢!