html - 如何使用 css 加入我的列表和 div？

Question

我需要你的帮助。

我试图弄清楚如何使我的 li 与我的 div 整齐地连接，但没有成功。我附上了问题的示例以及期望的结果。也许有一些 CSS 技巧可以解决这个问题，但我自己还没有足够的技巧来解决这个问题，只是看到它已经在一些网站上完成了。

问题:

期望的结果:

window.onload = function() {
  $("#list li").click(function(){
    var $li = $(this);
    var selector = $li.data("show");   // => "#item1"
    $('.item').addClass('hidden');
    $('ul').children().removeClass('selected');
    $(selector).removeClass("hidden"); //but show matching item
    $(this).addClass("selected"); //but show matching item
    alert($(this).attr("class").split(' '))
  });
  $("#list li").eq(0).click();
}

* {
  font-family: Segoe UI;
  font-size: 9pt;
}
#container {
  bottom: 0; left: 0; top: 0; right: 0;
  margin: auto;
  position: absolute;
  width: 900px;
  height: 600px;
}
#list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#list li {
  margin:0 0 10px 0;
  background: #FFF;
  padding: 10px;
  cursor: pointer;
  color: rgb(149,149,149);
  font-size: 11pt;
}
.item {
  width: 100%;
  height: 100%;
  border: 1px solid red;
}
#menu {
  float: left;
  width: 25%;
  height: 100%;
}
#content {
  float: left;
  width: 75%;
  background-color: rgb(238,238,238);
  height: 100%;
}
.hidden{ display:none; }
#list li.selected {
  color: rgb(149,149,149);
  border-top: 1px solid red;
  border-bottom: 1px solid red;
  border-left: 1px solid red;
}
.selected {
  background: rgb(238,238,238) !important;
  color: rgb(51,51,51) !important;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div id="menu">
    <ul id="list">
      <li data-show="#item1">File Information</li>
      <li data-show="#item2">My Summary</li>
      <li data-show="#item3">Comments</li>
    </ul>
  </div>
  <div id="content">
    <div id="item1" class="hidden item">FILE INFORMATION</div>
    <div id="item2" class="hidden item">MY SUMMARY</div>
    <div id="item3" class="hidden item">COMMENTS</div>
  </div>
</div>

Answer 1

我将为您提供可以使用纯 CSS 轻松实现的概念性解决方案。

1) 设置列表项在顶部、底部和左侧有边框。

2) 然后使用 z-index 将列表项置于较大框的上方。

3) 最后，您需要将列表向右移动或将框向左移动边框宽度的量，以便它们重叠以覆盖应该隐藏的边框的一小部分在列表项下。