Question

我正在尝试在我的网站上创建一个消息框，这样当用户点击收件箱图标时，会出现一个带有消息的框。类似于stackoverflow如何做到这一点。 Stackoverflow通过在包含收件箱，成就等的有序列表之外设置div，然后绝对定位该div以使其看起来从收件箱图标中删除来实现此目的。

我正在尝试这样做，但我希望消息框是列表项的子项。

.list {
  display: flex;
  position: relative;
}

div.messages {
  display: block;
  position: absolute;
}

<ol class="list">
  <ul> inbox
    <div class="messages"> some message<br> blah blah another message
    </div>
  </ul>
  <ul> another </ul>
</ol>

是否有一种简单的方法可以确保消息框的右上角触及列表项的左下角，而不管消息框的宽度如何？

也许我正在考虑这个错误，这实际上并不意味着是一个亲子情况（因为我想要做的事实上是将孩子置于父母之外......）。但是对于我网站部分的概念性组织，我真的希望将其作为父母的孩子来处理。

Answer 1

像这样

 $(".nav_link").on('click',function() {

   $(this).next('.container').addClass("block_container");
 })

    .list {
      	display: inline-block
      	position: relative;
    }
    li{
        list-style: none;
    }
    .list .dropdown_ancker{
      	display: inline-block;
      	width: 50px;
      	background-color: red;
        list-style: none;
        margin-right: 12px;
      	position: relative;
    }
    .container{
        position: absolute;
        display: none;

      }
      .block_container{
        display: block;

      }

      .container{
      background-color: green;
      right:50px;

      }

      .container li{
        color: #252525;
        padding: 12px 20px;


      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class = "list"> 

       <li class="dropdown_ancker">another</li>
       <li class="dropdown_ancker">
        <span class="nav_link">inbox</span>
        <ul class="container">
          <li class="m">something</li>
          <li class="m">something</li>
        </ul>

       </li><!--
    --><li class="dropdown_ancker">another</li>
    </ol>

.container right = dropdown_ancker width

Answer 2

您的父[{1}}也应该有ul，然后您可以将position: relative;设置为您的下拉列表right: 0;。此外，我没有看到需要设置 div.messages此处为.list。

＆＃13;

flexbox

＆＃13;

.list {
  display: flex;
  position: relative;
}

div.messages {
  display: block;
  position: absolute;
  right: 0;
  border: 1px solid blue; /*for testing only, easier to see the element*/
}

ul {
  border: 1px solid red; /*for testing only, easier to see the element*/
  position: relative;
  padding: 0 10px;
}

li {
  list-style: none; /*to remove the bullet symbol from li*/
}

＆＃13;

Answer 3

如果你知道如何使用正确的html结构，元素定位，css调整和jquery，你可以实现这一点。这是我为您创建的示例。它在每个ul之后使用一个简单的menu-box和li div来获得所需的结果。

＆＃13;

$(function(){
  
 $('.main-menu li > a').click(function(){
    $('.menu-box').hide();
    $(this).next().show();
  });
  
  $(document).mouseup(function(e) 
{
    var container = $(".menu-box");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});
  
});

＆＃13;

@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

body{
  padding:0px;
  margin:0px;
}

.fa {
position: relative;
display: table-cell;
width: 60px;
height: 40px;
text-align: center;
vertical-align: middle;
font-size:25px;
}

.main-menu{
  width:100vw;
  height:38px;
  text-align:center;
}

.main-menu>ul {
margin:10px;
  display:inline-block;
}

.main-menu li {
position:relative;
display:block;
width:60px;
float:left;
}

.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#999;
font-family: arial;
font-size: 16px;
text-decoration:none;
border:1px solid black;
}

.menu-box{
background:gray;
border:1px solid black;
width:250px;
height:350px; /*Set as necesary or auto based on content*/
overflow:hidden;
z-index:1000;
display:none;
margin-top:-1px;
position:absolute;
/*left:0*/  /* Use this if your want to align box to the left*/
right:60px; /* width of icon can be set in jQuery if dynamic */
}

.hidden{
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Click on any icon</h2>
<nav class="main-menu">
            <ul>
                <li>
                    <a>
                        <i class="fa fa-home fa-2x"></i>
                    </a>
                  <div class="menu-box"></div>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-laptop fa-2x"></i>
                    </a>
                    <div class="menu-box"></div>
                </li>
                <li>
                    <a href="#">
                       <i class="fa fa-list fa-2x"></i>
                    </a>
                    <div class="menu-box"></div>
                </li>
            </ul>
  </nav>

＆＃13;

希望这会有所帮助。快乐的编码。：）

如何对齐div，让孩子的右上角触及父母的左下角？

3 个答案: