如何在HTML，CSS中將項目符號和垂直線繪制到列表項中
[英]How to give the bullet and vertical line draw into list item in HTML,CSS
問題描述
https://jsfiddle.net/1fynun7a/1/
在這個小提琴中，使用帶有線的示例樹，而嵌套樹也包含線。
[AS pet the jsfiddle there is a list item ,but I want bullet symbols
exactly same as into the image,
Any help would greatly appreciated ?
Thanks in advance.]
2 個解決方案
解決方案1
0 2018-06-12 16:46:41
您可以使用另一個偽元素來完成此操作。 后
li{
/* This allows to adjust the after element relative to the <li> tag */
position: relative;
}
li:after {
content: ".";
position: absolute;
left: -5px;
top: -7px;
font-size: 35px;
}
您可以像這樣在列表中更改項目符號的大小：
/* First */
ul li:after{
font-size: 35px;
}
/* Second */
ul ul li:after{
font-size: 40px;
}
/* And so on... */
ul ul ul li:after{
}
但是我不確定不同的瀏覽器是否將點放置在正確的位置，也許將背景圖片用作項目符號
編輯：將其用於您的after元素（比使用“。”作為項目符號更好）：
li:after{
content: "";
position: absolute;
left: -5px;
top: 7px;
display: block;
width: 9px;
height: 9px;
border-radius: 50%;
background-color: red;
}
解決方案2
0 2018-06-12 16:58:35
在每個li和以下CSS中添加了一個空跨度
ul.tree li span {
position: absolute;
left: -6px;
top: 5px;
display: inline-block;
width:10px;
height: 10px;
background-color: red;
border-radius: 5px;
}
還更新了以下樣式
ul.tree li:before {
position:relative;
top:-0.3em;
height:1em;
width:12px;
color:white;
border-bottom:1px solid rgb(100,100,100);
content:"";
display:inline-block;
left:-8px;
}
ul.tree, ul.tree ul { list-style: none; margin: 0; padding: 0; } ul.tree ul { margin-left: 10px; } ul.tree li { margin: 0; padding: 0 7px; line-height: 20px; color: #369; font-weight: bold; border-left:1px solid rgb(100,100,100); position: relative; } ul.tree li span { position: absolute; left: -6px; top: 5px; display: inline-block; width:10px; height: 10px; background-color: red; border-radius: 5px; } } ul.tree li:last-child { border-left:none; } ul.tree li:before { position:relative; top:-0.3em; height:1em; width:12px; color:white; border-bottom:1px solid rgb(100,100,100); content:""; display:inline-block; left:-8px; } ul.tree li:last-child:before { border-left:1px solid rgb(100,100,100); }
<html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title></title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="robots" content="noindex, nofollow"> <meta name="googlebot" content="noindex, nofollow"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="/js/lib/dummy.js"></script> <link rel="stylesheet" type="text/css" href="/css/result-light.css"> <style type="text/css"> ul.tree, ul.tree ul { list-style: none; margin: 0; padding: 0; } ul.tree ul { margin-left: 10px; } ul.tree li { margin: 0; padding: 0 7px; line-height: 20px; color: #369; font-weight: bold; border-left:1px solid rgb(100,100,100); position: relative; } ul.tree li span { position: absolute; left: -6px; top: 5px; display: inline-block; width:10px; height: 10px; background-color: red; border-radius: 5px; } } ul.tree li:last-child { border-left:none; } ul.tree li:before { position:relative; top:-0.3em; height:1em; width:12px; color:white; border-bottom:1px solid rgb(100,100,100); content:""; display:inline-block; left:-8px; } ul.tree li:last-child:before { border-left:1px solid rgb(100,100,100); } </style> <!-- TODO: Missing CoffeeScript 2 --> <script type="text/javascript"> window.onload=function(){ } </script> </head> <body> <ul class="tree"> <li><span></span>Animals <ul> <li><span></span>Birds</li> <li><span></span>Mammals <ul> <li><span></span>Elephant</li> <li><span></span>Mouse</li> </ul> </li> <li><span></span>Reptiles</li> </ul> </li> <li><span></span>Plants <ul> <li><span></span>Flowers <ul> <li><span></span>Rose</li> <li><span></span>Tulip</li> </ul> </li> <li><span></span>Trees</li> </ul> </li> </ul> <script> // tell the embed parent frame the height of the content if (window.parent && window.parent.parent){ window.parent.parent.postMessage(["resultsFrame", { height: document.body.getBoundingClientRect().height, slug: "" }], "*") } </script> </body></html>
如何給 HTML 和 CSS 中的垂直線編號
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.