语义下拉 100% 宽度（左 = 0 像素）？

Question

http://jsfiddle.net/gL1xynzr/3/ 下拉菜单在手机屏幕宽度为 100% 时效果很好。

<div id="heroes-dropdown" class="ui dropdown">
    <div class="text">Heroes</div>
    <i class="dropdown icon"></i>
    <div class="menu">
        <a class="item"><i class="edit icon"></i> Edit Profile</a>
        <a class="item"><i class="globe icon"></i> Choose Language</a>
        <a class="item"><i class="settings icon"></i> Account Settings</a>
    </div>
</div>

.menu 
{ 
    width:100vw;
    max-width:440px;
}

但是，如果我在当前下拉菜单的左侧还有其他下拉菜单，则菜单不会从 left=0px 开始，例如http://jsfiddle.net/no7ta6zc/3/

<div id="heroes-dropdown2" class="ui dropdown">
    <div class="text">Heroes2</div>
    <i class="dropdown icon"></i>
    <div class="menu">
        <a class="item"><i class="edit icon"></i> Edit Profile</a>
        <a class="item"><i class="globe icon"></i> Choose Language</a>
        <a class="item"><i class="settings icon"></i> Account Settings</a>
    </div>
</div>

<div id="heroes-dropdown3" class="ui dropdown">
    <div class="text">Heroes3</div>
    <i class="dropdown icon"></i>
    <div class="menu">
        <a class="item"><i class="edit icon"></i> Edit Profile</a>
        <a class="item"><i class="globe icon"></i> Choose Language</a>
        <a class="item"><i class="settings icon"></i> Account Settings</a>
    </div>
</div>

有谁知道如何让任何下拉菜单的菜单宽度填满整个屏幕？

Answer 1

您需要取消下拉菜单的相对位置 div，然后将所有下拉菜单包裹在另一个 div 中并使其成为相对位置。绝对定位的项目将根据它到达的第一个定位的祖先来定位：

$('.ui.dropdown').dropdown();

.menu {
  Width: 100vw;
  max-width: 440px;
}

.dropdown-wrapper {
  /* make the wrapper relative */
  position: relative;
}

.dropdown-wrapper .ui.dropdown {
  /* cancel relative position if these divs */
  position: static;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.1/semantic.min.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.1/semantic.min.js"></script>
<!-- add this div -->
<div class="dropdown-wrapper">
  <div id="heroes-dropdown" class="ui dropdown">
    <div class="text">Heroes</div>
    <i class="dropdown icon"></i>
    <div class="menu">
      <a class="item"><i class="edit icon"></i> Edit Profile</a>
      <a class="item"><i class="globe icon"></i> Choose Language</a>
      <a class="item"><i class="settings icon"></i> Account Settings</a>
    </div>
  </div>

  <div id="heroes-dropdown2" class="ui dropdown">
    <div class="text">Heroes2</div>
    <i class="dropdown icon"></i>
    <div class="menu">
      <a class="item"><i class="edit icon"></i> Edit Profile</a>
      <a class="item"><i class="globe icon"></i> Choose Language</a>
      <a class="item"><i class="settings icon"></i> Account Settings</a>
    </div>
  </div>

  <div id="heroes-dropdown3" class="ui dropdown">
    <div class="text">Heroes3</div>
    <i class="dropdown icon"></i>
    <div class="menu">
      <a class="item"><i class="edit icon"></i> Edit Profile</a>
      <a class="item"><i class="globe icon"></i> Choose Language</a>
      <a class="item"><i class="settings icon"></i> Account Settings</a>
    </div>
  </div>
</div>

语义下拉 100% 宽度（左 = 0 像素）？

Semantic dropdown 100% width (left=0px)?

html

javascript

css

jquery

semantic-ui