圆圈背景无法放置图标
$("#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，但对齐方式不正确。 我上传了一段代码。所以可以请我帮忙。背景应该显示如下图所示。
8 个答案:
答案 0 :(得分：2)
使用此样式可提供圆形背景
#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%;
}
答案 1 :(得分：1)
嘿，检查以下代码和输出。我添加了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>
答案 2 :(得分：0)
您可以为此使用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>
答案 3 :(得分：0)
$("#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>
答案 4 :(得分：0)
您必须为跨度定义样式以显示白色圆圈，并在跨度中显示文本+和-。
$("#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>
答案 5 :(得分：0)
对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>
答案 6 :(得分：0)
这是有效的Codepen解决方案
只需在span：after中的：after伪代码中添加背景颜色和所有CSS，就可以正常工作
[https://codepen.io/ruchitaghodasara/pen/oMpwdj][1]
[1]: https://codepen.io/ruchitaghodasara/pen/oMpwdj
答案 7 :(得分：0)
将背景设置为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;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？