javascript - 获取一行以使用 HTML/CSS 显示

Question

我的应用程序应该能够显示带有 HTML、CSS 和 javascript 的树，并且我可以绘制除我用箭头指向的图形元素之外的所有内容，即不会显示的灰色水平虚线:

以上是我想要的结果。我的结果是这样的，没有水平线:

CSS 是

    <style type="text/css">/* TREE LAYOUT */ .tree ul { margin:0 0 0 5px; padding:0 0 0 0; list-style-type:none; } .tree li { display:block; min-height:18px; line-height:18px; padding:0 0 0 15px; margin:0 0 0 0; /* Background fix */ clear:both; } .tree li ul { display:none; } .tree li a, .tree li span { display:inline-block;line-height:16px;height:16px;color:black;white-space:nowrap;text-decoration:none;padding:1px 4px 1px 4px;margin:0; } .tree li a:focus { outline: none; } .tree li a input, .tree li span input { margin:0;padding:0 0;display:inline-block;height:12px !important;border:1px solid white;background:white;font-size:10px;font-family:Verdana; } .tree li a input:not([class="xxx"]), .tree li span input:not([class="xxx"]) { padding:1px 0; } /* FOR DOTS */ .tree .ltr li.last { float:left; } .tree > ul li.last { overflow:visible; } /* OPEN OR CLOSE */ .tree li.open ul { display:block; } .tree li.closed ul { display:none !important; } /* FOR DRAGGING */ #jstree-dragged { position:absolute; top:-10px; left:-10px; margin:0; padding:0; } #jstree-dragged ul ul ul { display:none; } #jstree-marker { padding:0; margin:0; line-height:5px; font-size:1px; overflow:hidden; height:5px; position:absolute; left:-45px; top:-30px; z-index:1000; background-color:transparent; background-repeat:no-repeat; display:none; } #jstree-marker.marker { width:45px; background-position:-32px top; } #jstree-marker.marker_plus { width:5px; background-position:right top; } /* BACKGROUND DOTS */ .tree li li { overflow:hidden; } .tree > .ltr > li { display:table; } /* ICONS */ .tree ul ins { display:inline-block; text-decoration:none; width:16px; height:16px; } .tree .ltr ins { margin:0 4px 0 0px; } </style><link href="/welcome/static/css/style.css" media="all" type="text/css" rel="stylesheet"><style type="text/css">#tree li > a ins {  background-image:url(/welcome/static/images/user.png); } </style>

.content .foot {

    clear: both;

}

#current_month {

    cursor: pointer;

}

p {

    clear:both;

}

#toggle_temporal_navigation {

    text-align: right;

}

form {

    text-align: center;

}

.form_controller {

    border-bottom: 1px solid #f3f3f3;

    clear: both;

    list-style: none;

    margin: 0 0 0.5em;

    padding: 1em 0 2em;

}

.form_controller dt {

    font-weight: bold;

    width: 100px;

}

.form_controller dt, .form_controller dd {

    float: left;

    margin-right: 2em;

}

fieldset {

    border:0;

    margin: 0 auto;

    text-align: left;

    width: 80%;

}

.ui-slider {

    clear: both;

    top: 1em;

}

#tree .level_parseable, #tree .cc_personal_parseable, #tree .cc_downlines_parseable, #tree .cc_activity_parseable, #tree .cc_nonmanager_parseable, #tree .cc_total_parseable{

    display:none;

}

.leaf_info th.sortSelectAsc{

    text-decoration: underline;

}

.leaf_info th.sortSelectDesc{

    text-decoration: overline;

}

/**

 * Display years right below beginning of year

 */

.ui-slider dt {

    text-align: left;

}

#instructions { 

    clear: both;

    margin-top: 2em;

}

#update_timeframe {

    text-align: center;

}

#update_timeframe button {

    height: 25px;

    margin: 0 auto;

    width: 150px;

}

#tree_container {

    max-height: 400px;

    overflow-y: auto;

    padding: 1em 0;

    zoom: 1;

}

.module {

    padding: 0.6em 1em !important;

}

#tree .name {

    cursor: pointer;

}

/* The '>' is a necessary selector so the level isn't inherited, i.e. all a-elements that

are children of a high-level distributor should not be bolded*/

/*Managers*/

#tree li.level_5>a, #tree li.level_6>a, #tree li.level_7>a, #tree li.level_8>a, #tree li.level_9>a, #tree li.level_10>a {

    font-weight: bold;

}

#tree li.inactive>a {

    color: #666;

}

/*New distributors*/

#tree li.new>a {

    color: #269e0f;

}

#tree li a {

    font-weight: normal;

    position: static;

}



.ui-dialog .left_column {

    font-weight: bold;

    padding-right: 5px;

    vertical-align: top;

}



.ui-dialog .checklist {

    background: transparent url(/pix/check.gif) left center no-repeat;

    padding-left: 23px;

}



.ui-dialog .plans {

    background: transparent url(/pix/target.gif) left center no-repeat;

    padding-left: 23px;

}





/* leafs */

.leaf_info.helper {

    border-bottom: 1px solid #efefef;

}

#tree_container .leaf_info {

    border-collapse: collapse;

    display: inline;

    vertical-align: bottom;

    zoom: 1;

}



.leaf_info th{

    color: #2779AA;

    cursor:pointer;

    font-weight:bold;

    text-align:left;

}



.leaf_info td{

    padding: 0 1px;

}



.leaf_info .name {

    white-space: normal;

    width: 253px;

}

ul li ul li .leaf_info .name {

    width: 233px;

}

ul li ul li ul li .leaf_info .name {

    width: 213px;

}

ul li ul li ul li ul li .leaf_info .name {

    width: 193px;

}

ul li ul li ul li ul li ul li .leaf_info .name {

    width: 173px;

}

ul li ul li ul li ul li ul li ul li .leaf_info .name {

    width: 153px;

}

ul li ul li ul li ul li ul li ul li ul li .leaf_info .name {

    width: 133px;

}

.leaf_info .level,.leaf_info .downlines,.leaf_info .cc_personal,.leaf_info .cc_downlines,.leaf_info .cc_activity,.leaf_info .cc_nonmanager,.leaf_info .cc_total {

    text-align: right;

}

.leaf_info .level {

    width: 33px;

}

.leaf_info .downlines {

    width: 38px;

}

.leaf_info .cc_personal {

    width: 48px;

}

.leaf_info .cc_downlines {

    width: 40px;

}

.leaf_info .cc_activity {

    width: 58px;

}

.leaf_info .cc_nonmanager {

    width: 63px;

}

.leaf_info .cc_total {

    width: 73px;

}

#tree_container .cc_personal {

    width: 55px;

}



.leaf_info td.manager {

    text-align: center;

    width: 310px;

}



.leaf_info td.manager.active {

    color: #000;

}

.leaf_info td.manager.inactive {

    color: #ccc;

}

HTML 是

`<div id="tree_container">

<div id="tree" class="tree tree-default" style="direction: ltr;">
<ul class="ltr">

{% for person in people %}
<li id="{{ person.key.id()|makeid }}" class="level_1 inactive leaf"><a class="open_dialog" href="/person/{{ person.key.id() }}"><ins>&nbsp;</ins><table class="leaf_info"><tbody>   <tr><td class="name">{{ person.firstname }} {{ person.lastname }} </td><td class="level" title="New Distributor"><span class="level_parseable">A</span>{{person.level()}}</td><td class="downlines">{{person.this_month_new_recruitment()}}</td><td class="cc_personal"><span class="cc_personal_parseable"></span>{{person.this_month_personal_silver()}}</td><td class="cc_downlines"><span class="cc_downlines_parseable"></span>{{person.this_month_distributor_silver()}}</td><td class="cc_activity"><span class="cc_activity_parseable"></span>{{person.activity()}}</td><td class="cc_nonmanager"><span class="cc_nonmanager_parseable"></span>{{person.this_month_non_manager_silver()}}</td><td class="cc_total"><span class="cc_total_parseable"></span>{{person.this_month_total_silver()}}</td></tr></tbody></table></a></li>{% endfor %}`

显示水平线应该怎么做？

谢谢

Answer 1

将这样的东西应用到您的列表项应该有效:

.your_selector:before /* :before is the key bit */
{
    color: red; /* change this */
    content: "--"; /* this should be ok */
}

它会在每个元素前添加 --。

要获得您想要的确切效果，您必须像这样添加图像:

    content: "<img src="my_dotted_line.png" alt="..." />";