Question

我试图让一个下拉菜单显示在打开它的URL下面。到目前为止，我已设法显示菜单，但我无法弄清楚如何正确定位。我的HTML看起来像这样

<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;
}

这是整个事物https://jsfiddle.net/jaktav3t/

的jsFiddle网址

Answer 1

您只需将父div设置为 display：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>

Answer 2

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

将div定位在标签下方

2 个答案: