与其他组件内联的破折号下拉列表的位置
hip*_*pus 4 html css python python-3.x plotly-dash
我正在使用plotly Dash，并且页面上的破折号组件的位置存在问题。它\xe2\x80\x99s\xe2\x80\x98更改年份\xe2\x80\x99下拉列表，如下图所示。我希望它位于我用箭头显示的位置，而它\xe2\x80\x99s位于我的第一个无线电项目组件下方。\n
我的代码如下：
\n\nexternal_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]\n\napp = dash.Dash(__name__, external_stylesheets= external_stylesheets )\n\n# determining the layout of the page\napp.layout = html.Div( [\n html.Div( [\n html.Label( [\'Change continent:\'],\n style={\'font-weight\': \'bold\', \'display\': \'inline-block\', \'justifyContent\': \'center\', \'width\': \'65%\',\n \'height\': \'100%\'},\n ),\n\n dcc.RadioItems(\n id=\'radio_ITEMS\',\n options=[\n {\'label\': \'AMERICA\', \'value\': \'graph1\'},\n {\'label\': \'EUROPE\', \'value\': \'graph2\'},\n {\'label\': \'ASIA\', \'value\': \'graph3\'}],\n value=\'graph1\',\n\n\n ),\n ], className=\'six columns\' ),\n\n html.Div( [\n html.Label( [\'Change the variable:\'],\n style={\'font-weight\': \'bold\', \'display\': \'inline-block\', \'justifyContent\': \'center\', \'width\': \'65%\',\n \'height\': \'100%\'},\n ),\n\n dcc.RadioItems(\n id=\'radio_items2\',\n options=[{\'label\': x, \'value\': x} for x in cols1],\n value=\'Happiness Score\',\n\n ),\n ], className=\'six columns\' ),\n html.Div( [\n html.Label( [\'Change the year:\'], style={\'font-weight\': \'bold\', \'display\': \'inline-block\'}),\n dcc.Dropdown(id="drop",\n options=[\n {"label": "1970", "value": 2015},\n {"label": "1980", "value": 2016},\n {"label": "1990", "value": 2017},\n {"label": "2000", "value": 2018},\n {"label": "2010", "value": 2019}],\n multi=False,\n value=2015,\n style={"width": "35%"},\n )]),\n\n html.Div(\n dcc.Graph( id=\'the_graph\',\n style={\'height\': 600, \'width\': 1000, }\n ),\n ),\n] ,className= \'fifteen columns\')\n\n@app.callback(\n Output( \'the_graph\', \'figure\' ),\n [Input( \'radio_ITEMS\', \'value\' ),\n Input( component_id=\'radio_items2\', component_property=\'value\' ),\n Input(\'drop\', \'value\')]\n根据经验，请使用css而不是内联调整应用程序的样式style。
您遇到的问题是您的 div 的宽度总和大于 100%，因此使它们跨越多行。您可以使用下面提供的代码进行修复。
\n\n从代码中删除样式+使用广泛的类（如有必要，请使用特定的 id）：
\n\n# determining the layout of the page\napp.layout = html.Div( [\n html.Div(\n classname="my-cols",\n children = [\n html.Label(\'Change continent:\'),\n dcc.RadioItems(\n id=\'radio_ITEMS\',\n options=[\n {\'label\': \'AMERICA\', \'value\': \'graph1\'},\n {\'label\': \'EUROPE\', \'value\': \'graph2\'},\n {\'label\': \'ASIA\', \'value\': \'graph3\'}\n ],\n value=\'graph1\',\n ),\n ]\n ),\n html.Div(\n classname="my-cols",\n children = [\n html.Label(\'Change variable:\'),\n dcc.RadioItems(\n id=\'radio_items2\', # id naming should be consistent...\n options=[{\'label\': x, \'value\': x} for x in cols1],\n value=\'Happiness Score\',\n ),\n ]\n ),\n html.Div(\n classname="my-cols",\n children = [\n html.Label(\'Change year:\'),\n dcc.RadioItems(\n id=\'radio_items2\', # id naming should be consistent...\n options=[\n {"label": "1970", "value": 2015},\n {"label": "1980", "value": 2016},\n {"label": "1990", "value": 2017},\n {"label": "2000", "value": 2018},\n {"label": "2010", "value": 2019}\n ],\n multi=False,\n value=\'Happiness Score\',\n ),\n ]\n ),\n html.Div(\n dcc.Graph(\n id=\'the_graph\',\n ),\n )\n) # close the app!\n在项目根目录 \xe2\x80\x93 中创建一个 css 文件，或在名为 的根目录中创建一个文件夹styles并在该文件夹中添加一个文件。名字随意...
# determining the layout of the page\napp.layout = html.Div( [\n html.Div(\n classname="my-cols",\n children = [\n html.Label(\'Change continent:\'),\n dcc.RadioItems(\n id=\'radio_ITEMS\',\n options=[\n {\'label\': \'AMERICA\', \'value\': \'graph1\'},\n {\'label\': \'EUROPE\', \'value\': \'graph2\'},\n {\'label\': \'ASIA\', \'value\': \'graph3\'}\n ],\n value=\'graph1\',\n ),\n ]\n ),\n html.Div(\n classname="my-cols",\n children = [\n html.Label(\'Change variable:\'),\n dcc.RadioItems(\n id=\'radio_items2\', # id naming should be consistent...\n options=[{\'label\': x, \'value\': x} for x in cols1],\n value=\'Happiness Score\',\n ),\n ]\n ),\n html.Div(\n classname="my-cols",\n children = [\n html.Label(\'Change year:\'),\n dcc.RadioItems(\n id=\'radio_items2\', # id naming should be consistent...\n options=[\n {"label": "1970", "value": 2015},\n {"label": "1980", "value": 2016},\n {"label": "1990", "value": 2017},\n {"label": "2000", "value": 2018},\n {"label": "2010", "value": 2019}\n ],\n multi=False,\n value=\'Happiness Score\',\n ),\n ]\n ),\n html.Div(\n dcc.Graph(\n id=\'the_graph\',\n ),\n )\n) # close the app!\n这应该可以解决你的问题。
\n