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

我試圖找出解決辦法，讓我的李與我的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>

來源

2015-10-20 BobbyJones

#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; 
    }

請試試這個

希望這有助於你。

來源

2015-10-20 19:05:50

完美無瑕的工作！我會盡我所能接受！非常感謝！ – BobbyJones

歡迎您:) –

此解決方案似乎隱藏在「活動」之下的標籤。有沒有辦法解決這個問題？ – Chris

我會給你可以很容易地用純CSS實現的概念解決方案。

1）將列表項設置爲頂部，底部和左側有邊框。

2）然後將列表項放在較大的方框上方z-index。 3）最後，你需要將列表移動到右邊或左邊的框中，邊框寬度的大小使它們重疊，以覆蓋應該留下的小部分邊框隱藏在列表項下。

來源

2015-10-20 19:03:43 Roope

您正在看到文件信息的邊框。有兩種可能的解決方案： 1 - 不要在.item類中放置左邊框。（但這看起來仍然不正確）

2 - 讓li稍微重疊內容區域。您需要提高內容的Z-索引，並使用負邊距將它們放在一起。

來源

2015-10-20 19:09:50

不是最漂亮的解決方案，但如果你是好與刪除「不活動」標籤的白色背景，你可以做一些重疊：

Demo

你#list和#list li將需要改變像這樣：

#list { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    position: relative; /*added*/ 
    left: 1px; /*added*/ 
} 
#list li { 
    margin:0 0 10px 0; 
    /*removed background*/ 
    padding: 10px; 
    cursor: pointer; 
    color: rgb(149,149,149); 
    font-size: 11pt; 
}

來源

2015-10-20 19:16:10 Chris

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

回答

相關問題