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

我正在尝试使网站显示如代码中所示的显示。我遇到的一个问题是，如示例所示，“Sweep”文本始终与side_panel_left div中的“Select Campaign:”文本保持一致。我希望它出现在它自己的div的顶部。用“运行代码片段”可以看到一个例子。CSS - 文本与其他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>

来源

2017-04-04 cepiolot

？你能展示演示图像吗？ –

我真的不明白你想要做什么..你能提供一个素描吗？ –

扫描确实出现在侧面板右侧div的顶部，也许你需要在'＃side_panel_right'上添加'vertical-align：top'来摆脱那一小部分的填充，但除此之外我不明白您在 – Pete

添加vertical-align: top;到#side_panel_right

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

要设置哪个位置扫描按钮

来源

2017-04-04 12:39:28

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

回答

相关问题