Question

我正在尝试创建一个类似于代码中显示的网站的网站。我一直遇到的一个问题是，如示例所示，“Sweep”文字与Select Campaign: div中的“side_panel_left”文字保持一致。我希望它出现在它自己的div的顶部。使用“运行代码段”可以看到一个示例。

我尝试更改side_panel_right div的显示以查看是否会改变内容，但无论是块还是表格单元格，文本仍然与"Select Campaign:"对齐。

这背后的原因是什么？有没有办法可以覆盖这种行为，只是让"Sweep"出现在side_panel_right的顶部？

#app_container {
    display: table;
    width: 100%;
}

#side_panel_left {
    display: table-cell;
    width: 240px;
}

.panel {
    border: 1px solid rgba(0,0,0,.12);
}

.input_title {
    position: relative;
    left: 5%;
}

.input_element {
    display: block;
    margin: 8px;
}

.input_box {
    position: relative;
    width: 30%;
    left: 40%;
}

.trigger_buttons {
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
}

.run_reset_buttons {
    float: left;
    width: calc(50% - 2px);
}

#map {
    display: table-cell;
}

#side_panel_right {
    display: table-cell;
    width: 140px;
}

<div id="app_container">
        <br>
        <div id="side_panel_left">
            <div id="campaign_select" class="panel">
                <span class="input_element input_title">Select Campaign:</span>
                <select id="campaign_drop" class="input_element input_box"></select>
            </div>
            <div id="numerical_input" class="panel">

            </div>
            <div id="run" class="trigger_buttons run_reset_buttons panel">
                Run
            </div>
            <div id="reset" class="trigger_buttons run_reset_buttons panel">
                Reset
            </div>
        </div>
        <div id="map" class="panel">

        </div>
        <div id="side_panel_right">
            <div id="sweep">
                Sweep
            </div>
        </div>
    </div>

Answer 1

将vertical-align: top;添加到#side_panel_right

#side_panel_right {
    display: table-cell;
    width: 140px;
    vertical-align: top;
}

CSS - 文本与其他div中的文本对齐

1 个答案: