在一个标记下正确定位div

我试图让一个下拉菜单出现在打开它的URL的正下方。到目前为止，我设法出现了一个菜单，但我无法弄清楚如何正确定位它。我的HTML看起来像这样在一个标记下正确定位div

<div id="container"> 
    Content here 
    <div class="line-gray-footer"></div> 
    <div class="footer"> 
    <a href="#">Link 1</a> | <a id="langSwitch">English ▼</a> 
    <div id="dropdown" class="drop-choices"> 
     <a class="choice" href="/de">Deutsch</a> 
     <a class="choice" href="/fr">Français</a> 
     <a class="choice" href="/it">Italiano</a> 
     <a class="choice" href="/es">Español</a> 
    </div> 
    </div> 
    <div class="morestuff"> 
    <table> 
    <tr> 
    <th>Test</th><th>Test</th> 
    </tr> 
    <tr> 
    <td>A</td><td>b</td> 
    </tr> 
    </table> 
    </div> 
</div>

CSS

#container{ 
    width:70%; 
    background: red; 
    margin: 0 auto; 
    height:800px; 
} 
.line-gray-footer { 
    background: #ececec none repeat scroll 0 0; 
    height: 3px; 
    margin: 10px 10px; 
} 
.footer { 
    text-align: center; 
} 

.drop-choices.inuse { 
    opacity: 1; 
    visibility: visible; 
    display: block; 
} 

.drop-choices { 
    background-color: white; 
    border: 1px solid gray;  
    border: medium none; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24); 
    display: none; 
    line-height: normal; 
    margin-top: 0;  
    opacity: 0; 
    position: absolute; 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s; 
    visibility: hidden; 
    white-space: nowrap; 
    z-index: 100;  

} 

.drop-choices a.choice { 
    border-bottom: 1px solid #edf1f3; 
    color: #777; 
    padding: 3px 12px; 
    transition: all 0.1s ease 0s; 
    cursor: pointer; 
    display: block; 
    padding: 2px 3px 1px; 
} 
.morestuff table{ 
    width: 100%; 
    border: 1px solid black; 
}

这里是整个事情的jsfiddle URL https://jsfiddle.net/jaktav3t/

来源

2017-04-01 John Baker

你只要把父DIV和设置显示：inline-block的它会工作

<div class="footer"> 
     <a href="#">Link 1</a> | <div style="display: inline-block"> 

      <a id="langSwitch">English ▼</a> 
      <div id="dropdown" class="drop-choices"> 
      <a class="choice" href="/de">Deutsch</a> 
      <a class="choice" href="/fr">Français</a> 
      <a class="choice" href="/it">Italiano</a> 
      <a class="choice" href="/es">Español</a> 
     </div> 
     </div> 

     </div>

来源

2017-04-01 05:08:41

加左：50％;在.drop-choices类中，所以它将显示在div的中心，也在下拉的下方。

来源

2017-04-01 05:17:53

在一个标记下正确定位div

回答

相关问题