使用自定义CSS的Plotly Dash中的列出现问题

Question

下面的代码应该在名为Setup的选项卡中生成三个相邻的下拉菜单，但我得到了三个下拉菜单，一个在另一个之上。

我做错了什么？如有任何帮助，我们将不胜感激！我已经包含了相关的Python代码，然后是我所有的CSS代码。注意，show_layout函数最终由index.py中的app.layout调用。

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from app import app
from styles import cma_tab_style, active_cma_tab_style

def show_layout():
layout = html.Div([
dcc.Tabs(id='AllTabs',
value='SetupTab',
children=[
dcc.Tab(label='Setup',
value='SetupTab',
style=cma_tab_style,
selected_style=active_cma_tab_style),
dcc.Tab(label='Summary',
value='SummaryTab',
style=cma_tab_style,
selected_style=active_cma_tab_style)
]),
html.Div(id='content')
], style={'marginTop': '30px'})
return layout

@app.callback(Output('content', 'children'),
Input('AllTabs', 'value'))
def render_content(tab):
if tab == 'SetupTab':
content = html.Div(render_setup_tab())
else:
content = html.Div([
html.H3('Tab content 2')
])
return content

def render_setup_tab():
layout = html.Div(
children=
[
html.Div(
[
dcc.Dropdown(
id='the_assets',
options=[{'label': x, 'value': x} for x in ('Asset 1', 'Asset 2')],
style={'marginTop': '15px', 'background': 'black', 'color': 'black'},
placeholder='Asset Name')
], className='four columns'),
html.Div(
[
dcc.Dropdown(
id='cma_data',
style={'marginTop': '15px', 'backgroundColor': 'black', 'fontColor': 'white'},
placeholder='CMA Data',
)
], className='four columns'),
html.Div(
[
dcc.Dropdown(
id='cma_gen',
style={'marginTop': '15px', 'backgroundColor': 'black', 'fontColor': 'white'},
placeholder='Gen Profile'
)
], className='four columns'),
], className='row')
return layout

对于cma_tab_style和active_cma_tab_style:

cma_tab_style = {
'borderBottom': '1px solid #d6d6d6',
'backgroundColor': 'rgb(80, 80, 80)',
'color': 'white',
'borderTop': '1px solid white',
}
active_cma_tab_style = {
'borderBottom': '1px solid #d6d6d6',
'backgroundColor': 'rgb(255,145,0)',
'color': 'white',
'borderTop': '1px solid white',
}

以下是我所有的CSS代码——以防出现任何问题：

body{
background-color: rgb(33, 33, 33);
font-family: 'arial';
}
h3{
font-color: white;
}
li{
display: block;
float: center;
border: 1px solid gray;
border-right: 1px solid rgb(200, 200, 200);
}

li a{
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
border: 1px solid gray;
}
.active .btn:hover{
background-color: orange;
color: white;
}
.ul:hover{
background-color: orange;
}

li a:active{
background-color: orange;
}
a{
display: inline-block;
padding: 8px;
background-color: (250, 250, 250)
}
a:hover{
background-color: orange;
}
.active{
background-color: rgb(60, 60, 60);
}
.VirtualizedSelectFocusedOption{
background-color: lightgrey;
color: black
}
button{
border-radius: 5px;
background-color: rgb(60, 60, 60);
border: none;
color: white;
text-align: center;
font-size: 16px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px
}
button span{
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
button span:after{
content: '0bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}

Answer 1

已解决：我没有使用className = "four columns"，而是在我的CSS中添加了以下代码段：

.stuff{
float: left;
justify-content: space-between;
width: 33%;
}
.row:after{
content: "";
display: table;
clear: both;
}

并设置className = "stuff"

希望这能帮助其他面临类似问题的人！