javascript - 圆形背景无法放在图标周围

Question

$("#vertical-menu h3").click(function () {
    //slide up all the link lists
    $("#vertical-menu ul ul").slideUp();
    $('.plus',this).html('+');
    //slide down the link list below the h3 clicked - only if its closed
    if (!$(this).next().is(":visible")) {
        $(this).next().slideDown();
        //$(this).remove("span").append('<span class="minus">-</span>');
        $('.plus').html('+');
        $('.plus',this).html('-');
    }
})

#vertical-menu {
    background: #004050;
    width: 100%;
   /* margin: 100px auto 0 auto; */
    color: white;
    /*box-shadow: 
		0 5px 15px 1px rgba(0, 0, 0, 0.6), 
		0 0 200px 1px rgba(255, 255, 255, 0.5);*/
}
/*heading styles*/
 #vertical-menu h3 {
    font-size: 12px;
    line-height: 34px;
    padding: 0 10px;
    cursor: pointer;
    /*fallback for browsers not supporting gradients*/
    background: #003040;
    background: linear-gradient(#003040, #002535);
}
/*heading hover effect*/
 #vertical-menu h3:hover {
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
/*iconfont styles*/
 #vertical-menu h3 span {
    font-size: 16px;
    float:right;
    color:#111;
}

/*list items*/
 #vertical-menu li {
    list-style-type: none;
}

/*links*/
 #vertical-menu ul ul li a {
    color: white;
    text-decoration: none;
    font-size: 11px;
    line-height: 27px;
    display: block;
    padding: 0 15px;
    /*transition for smooth hover animation*/
    transition: all 0.15s;
}
/*hover effect on links*/
 #vertical-menu ul ul li a:hover {
    background: #003545;
    /*border-left: 5px solid lightgreen;*/
}
/*Lets hide the non active LIs by default*/
 #vertical-menu ul ul {
    display: none;
}
#vertical-menu li.active ul {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vertical-menu">
                    <ul>
                        <li class="active">
                          <h3>Home</h3>
                        </li>
                        <li>
                            <h3>Document Missing
                                <span class="plus">+</span>
                            </h3>

                            <ul>
                                <li>
                                    <a href="#">Reports</a>
                                </li>
                                <li>
                                    <a href="#">Search</a>
                                </li>
                                <li>
                                    <a href="#">Graphs</a>
                                </li>
                                <li>
                                    <a href="#">Settings</a>
                                </li>
                            </ul>
                        </li>
                        <!-- we will keep this LI open by default -->
                        <li>
                            <h3>Documents Submitted
                                <span class="plus">+</span>
                            </h3>

                            <ul>
                                <li>
                                    <a href="#">Today's tasks</a>
                                </li>
                                <li>
                                    <a href="#">Urgent</a>
                                </li>
                                <li>
                                    <a href="#">Overdues</a>
                                </li>
                                <li>
                                    <a href="#">Recurring</a>
                                </li>
                                <li>
                                    <a href="#">Settings</a>
                                </li>
                            </ul>
                        </li>

我使用 jquery 创建了一个可折叠的侧导航栏。我面临的唯一问题是加号和减号图标上应该有一个圆形背景，我无法实现。我试过使用 using css 但对齐方式不正确。我上传了一段片段。那么有人可以帮我解决这个问题吗？背景应该如下图所示。

Answer 1

使用此样式提供圆形背景

#vertical-menu h3 span {
    border-radius: 50%;
    background: #fff;
    height: 20px;
    width: 20px;
    line-height: 20px;
    text-align: center;
    margin: 6px 0px;
    border-radius: 50%;
}