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

我需要你的帮助。

我试图无济于事，试图弄清楚如何使我的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>

最佳答案

   #list li.selected {
      color: rgb(149,149,149);
      border-top: 1px solid red;
      border-bottom: 1px solid red;
      border-left: 1px solid red;
      width: 205px;
      z-index: 40;
      position: absolute;
   }

请尝试这个

希望这对您有所帮助。