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中并制作该相对值。绝对定位的物品将根据它所在的第一个定位祖先进行定位：

＆＃13;

    include<stdio.h>
include<unistd.h>
void main(){

fork();
if fork();
if fork();
fork();
sleep(10);

}

＆＃13;

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

＆＃13;

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

＆＃13;

语义下拉100％宽度（左= 0px）？

1 个答案: