圆圈背景无法放置图标

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创建了可折叠的侧面导航栏。我面临的唯一问题是我无法实现的加号和减号图标上应该有一个圆圈背景。我试过使用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%;
}

Answer 2

嘿，检查以下代码和输出。我添加了display：flex，并将align-items居中，将背景设置为白色，并为白色圆圈背景指定了一些半径。而且我还使用了display：flex和align：居中于h3，以便所有内容都位于同一行的居中。

$("#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);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/*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;
    border-radius: 20px;
    background: #fff;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*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>

Answer 3

您可以为此使用background和border-radius。在下面查看更新的代码段。

$("#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;
}

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

<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>

Answer 4

$("#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;
    padding: 0 10px;
    cursor: pointer;
    /*fallback for browsers not supporting gradients*/
}
/*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;
    background: #fff;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    text-align: center;
}

/*list items*/
 #vertical-menu li {
    list-style-type: none;
    background: #003040;
    padding: 10px 0;
    background: linear-gradient(#003040, #002535);
    margin: 10px 0;
}

/*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>

Answer 5

您必须为跨度定义样式以显示白色圆圈，并在跨度中显示文本+和-。

$("#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;
    border-radius: 50%;
    background: #fff;
    height: 20px;
    width: 20px;
    line-height: 20px;
    text-align: center;
    margin: 6px 0px;
}

/*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>

Answer 6

对background标签使用border-radius和span。请检查以下代码段

$("#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;
  width: 16px;
  text-align: center;
  height: 16px;
  line-height: 1;
  margin-top: 8px;
  border-radius: 50%;
  background: white;
}

/*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>
  </ul>
</div>

Answer 7

这是有效的Codepen解决方案
只需在span：after中的：after伪代码中添加背景颜色和所有CSS，就可以正常工作 [https://codepen.io/ruchitaghodasara/pen/oMpwdj][1]

  [1]: https://codepen.io/ruchitaghodasara/pen/oMpwdj

Answer 8

将背景设置为Span标签对我有用： 这是我应用于span标签的属性

• 宽度：23像素；

• 背景色：白色；

• 文本对齐：居中；

• 边界半径：38像素；

• 高度：23像素；

• margin-top：5像素；

• 行高：1.3;

您可以根据自己的意愿更改这些属性

OperationalError: (psycopg2.OperationalError) could not translate host name "my-airflow-db.l9zijaslosu.us-east-1.rds.amazonaws.com" to address: Name or service not known
 (Background on this error at: http://sqlalche.me/e/e3q8)

$("#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;
}
.plus
{
      width: 23px;
    background-color: white;
    text-align: center;
    border-radius: 38px;
    height: 23px;
    margin-top: 5px;
    line-height: 1.3;
}