Question

我几年来第一次回到HTML，我很感激我从其他Q＆amp; A获得的帮助，但我似乎无法找到解决我最近挑战的解决方案。

我正在使用DIV使用onclick（）功能运行JS。在我最近的改进中，我希望将DIV分成多个水平部分（我知道这是可能的），但我希望文本继续流出各个部分。我将尝试展示我想要做的一个例子：

l TITLE FOR ENTIRE DIV
升
l选择1 l第2节l第3节

我希望每个部分的可点击范围能够垂直向上延伸到标题文本中。我该怎么做？谢谢！

Answer 1

你分层。将标题div放在顶部或下方（并使div部分透明）。使用z-index，您可以在图层中向上或向下放置div。你只需要用绝对定位它们，因为它们不会重叠在线（默认）。你也可以将它们相对定位。

div.title {height: 2em;}
div.section {
position: relative;
top : -2em;
padding-top : 2em; (so the section text starts lower)
z-index: 999;
}

还有其他各种方法可以实现这一目标。最好的取决于你的网站的其余部分是什么样的，以及它与其他一切的混淆程度如何。

Answer 2

这样的事情？

＆＃13;

#title{background-color:red;}
#menu ul{position:absolute;top:0px;left:40px;}
#menu ul li{display:inline-block;list-style-type:none;height:32px;width:132px;border-right:1px solid green;text-align:center;background-color:rgba(155,155,155,0.4);}

＆＃13;

<div id="title">Rampant Reds Fan</div>
<div id="menu">
  <ul>
    <a href=""><li>Rampant</li></a>
    <a href=""><li>Reds</li></a>
    <a href=""><li>Fan</li></a>
   </ul>
  </div>

＆＃13;

如何将div拆分为多个可单击部分？

2 个答案: