Question

我遇到了一些困难，希望有人能指出我正确的方向。我是CSS的新手，所以希望这是一个非常简单的情况。

我想要的是什么：

我想在我的标题中植入（Nest？）多个下拉框，沿着该标题水平延伸。

我尝试了什么：

我尝试创建一个相对下拉框并将其放在相对容器中的绝对标题中。

包装/容器（相对） - ＆gt;标题Div（绝对） - ＆gt;下拉按钮（相对） - ＆gt;下拉内容（绝对）

我得到了什么：

相对下拉按钮将显示在绝对标题下而不是在其中。下拉框将起作用，但它不会将自己定位在我想要的位置。我不知道怎么能得到我想要的东西。

＆＃13;

div#container {
  /*Features*/
  /*Position*/
  position: relative;
  top: 5%;
  left: 15%;
  /*Dimensions*/
  height: 90%;
  width: 70%;
  /*Font and colours*/
  background: gray;
}

div#header {
  /*Features*/
  position: absolute;
  border-style: solid;
  /*Dimensions*/
  height: 10%;
  top: 0%;
  left: 0;
  right: 0;
  /*Font and colours*/
  background: #e67300;
  font-size: 30px;
  text-align: center;
  clear: both;
}

.dropdown {
  /*Position*/
  top: 10%;
  left: 15%;
  position: relative;
  display: inline-block;
}

.dropdown-content {
  /*Position*/
  position: absolute;
  z-index: 1;
  display: none;
}

.dropdown:hover .dropdown-content {
  display: block;
}

＆＃13;

<div id="container">
  <div id="header">
    <p>Title</p>
    <div class="dropdown" style="font-size:10px">
      Mouse over me please
      <div class="dropdown-content">
        <a href="index.html">Home</a>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

将此添加到您的css文件中：

p{
    display:inline-block;
}

<p>Title</p>您需要知道<p>是块元素占据整行。

这是您修改的CSS：

div#container
{
    /*Features*/
    /*Position*/
    position:relative;
    top:5%;
    left:15%;
    /*Dimensions*/
    height:90%;
    width:70%;
    /*Font and colours*/
    background:gray;
}

div#header
{
    /*Features*/
    position:absolute;
    border-style:solid;
    /*Dimensions*/
    height:10%;
    top:0%;
    left:0;
    right:0;
    /*Font and colours*/
    background:#e67300;
    text-align:center;
    clear:both;
}
p{
    display:inline-block;
}

.dropdown
    {
        /*Position*/
        top:10%;
        left:15%;
        position:relative;
        display: inline-block;

    }

    .dropdown-content
    {
        /*Position*/
        position:absolute;
        z-index:1;
        display:none;
    }

    .dropdown:hover .dropdown-content
    {
        display:block;
    }

Answer 2

只需从div＃header中删除height属性即可。希望这个帮助

div#container {
  /*Features*/
  /*Position*/
  position: relative;
  top: 5%;
  left: 15%;
  /*Dimensions*/
  height: 90%;
  width: 70%;
  /*Font and colours*/
  background: gray;
}

div#header {
  /*Features*/
  position: absolute;
  border-style: solid;
  /*Dimensions*/
  top: 0%;
  left: 0;
  right: 0;
  /*Font and colours*/
  background: #e67300;
  font-size: 30px;
  text-align: center;
  clear: both;
}

.dropdown {
  /*Position*/
  top: 10%;
  left: 15%;
  position: relative;
  display: inline-block;
}

.dropdown-content {
  /*Position*/
  position: absolute;
  z-index: 1;
  display: none;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<div id="container">
  <div id="header">
    <p>Title</p>
    <div class="dropdown" style="font-size:10px">
      Mouse over me please
      <div class="dropdown-content">
        <a href="index.html">Home</a>
      </div>
    </div>
  </div>
</div>

是否可以在绝对div中放置一个相对下拉框？

2 个答案: