Question

我正在尝试创建一个全宽度左对齐下拉菜单（使用语义UI）

现在，菜单继承了与其父div完全相同的宽度和位置。我想要孩子＆＃34;菜单跨度全宽，始终与左侧对齐。我准备了一个JS小提琴，显示当前行为，显示子菜单与父div对齐，而不是全宽。

HTML：

<html>
    <head>

      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.6/semantic.min.css" />

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.6/semantic.min.js"></script>

    </head>

    <body>        
          <div id="nav_items"> 
            <div class="ui top center pointing dropdown">
              <div class="title">Dropdown 1</div>
              <ul class="menu">
                <li>Item One 1</li>
                <li>Item Two 1</li>
                <li>Item Three 1</li>
                <li>Item Four 1</li>
              </ul>
            </div>
            <div class="ui top center pointing dropdown">
              <div class="title">Dropdown 2</div>
              <ul class="menu">
                <li>Item One 2</li>
                <li>Item Two 2</li>
                <li>Item Three 2</li>
                <li>Item Four 2</li>
              </ul>
            </div>
            <div class="ui top center pointing dropdown">
              <div class="title">Dropdown 3</div>
              <ul class="menu">
                <li>Item One 3</li>
                <li>Item Two 3</li>
                <li>Item Three 3</li>
                <li>Item Four 3</li>
              </ul>
            </div>
          </div>

    </body>
</html>

CSS：

body {
  background: #f6f5f4; 
  font-family: 'Open Sans', sans-serif;
  box-sizing: inherit;
}

/*------------ NAV-ITEMS STYLE ------------*/  
#nav_items {
  position: relative;
  width: 100%;
  display: block;
  float: left;
  list-style-type: none;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.1); 
}

#nav_items .ui.dropdown {
  width: 33.33%;
  float: left;
  position: relative;
  text-align: center;
  line-height: 60px;
  height: 60px;
  border-right: 1px solid rgba(0,0,0,0.1);
}

#nav_items .ui.dropdown .title {
  color: #000;
  font-size: 16px;
  background: #fff;
  cursor: pointer;
}


/*------------ NAV-ITEMS MENU STYLE ------------*/
#nav_items .ui.dropdown .menu {
  position: absolute;
  top: 60px;
  margin: 0;
  padding: 0;
  outline: 0;
  background: #fff;
  border: none;
  border-top: 1px solid rgba(0,0,0,0.04);
  border-radius: 0px;
  min-width: 100% !important;  
}

#nav_items .ui.dropdown .menu li {
   list-style-type: none;
  text-align:left; 
  float: left;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  cursor: pointer;
  min-width: 100% !important; 
  text-indent: 20px;
}

#nav_items .ui.pointing.dropdown .menu:after {
  display: none;
}

JS：

$(document).ready(function(){

  $('#nav_items .dropdown')
    .dropdown({
  });

});

JS Fiddle Link：

this

谢谢！

Answer 1

https://jsfiddle.net/blaird/ja4uy405/10/

如何修复下拉列表以将其从流程中删除：

#nav_items .ui.dropdown .menu {
  position: fixed;
  top: 60px;
  left: 0;
  margin: 0;
  padding: 0;
  outline: 0;
  background: #fff;
  border: none;
  border-top: 1px solid rgba(0,0,0,0.04);
  border-radius: 0px;
  min-width: 100% !important;  
}

全宽左对齐下拉菜单

1 个答案: