水平滚动DIV内的语义UI下拉

Question

我试图在包含许多列的表格中包含语义UI下拉列表，其中有一个水平滚动条。

单击下拉菜单时，选项隐藏在div内。

拨弄： http://jsfiddle.net/rotemx/n0azk0jc/

代码：

<div id="wrapper"> 
    <div id="content"> 
    <div style="width: 500px"> 
     <div class="inline-block"> 
     <div class="ui selection dropdown"> 
      <input type="hidden" name="gender"> 
      <i class="dropdown icon"></i> 
      <div class="default text">Gender</div> 
      <div class="menu"> 
      <div class="item" data-value="1">Male</div> 
      <div class="item" data-value="0">Female</div> 
      </div> 
     </div> 
     </div> 
     <div class="inline-block"> 
     <div class="ui selection dropdown"> 
      <input type="hidden" name="gender"> 
      <i class="dropdown icon"></i> 
      <div class="default text">Gender</div> 
      <div class="menu"> 
      <div class="item" data-value="1">Male</div> 
      <div class="item" data-value="0">Female</div> 
      </div> 
     </div> 
     </div> 
     <div class="inline-block"> 
     <div class="ui selection dropdown"> 
      <input type="hidden" name="gender"> 
      <i class="dropdown icon"></i> 
      <div class="default text">Gender</div> 
      <div class="menu"> 
      <div class="item" data-value="1">Male</div> 
      <div class="item" data-value="0">Female</div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

截图：

quesiton： 如何使下拉菜单可见？

Answer 1

使用您当前的设置，您不能。 溢出：无元素内的任何内容不能显示在元素边界之外。