如何使 li 元素在使用多菜单的情况下将元素包装到下一行的情况下居中对齐?
How to make the li elements aligned center in the case with wrap an element to the next line in the case with a multimenu?
我做了一个简单的多菜单,点击鼠标就可以打开其中的项目,但是我有一个问题很难解决。在使用多菜单的情况下,如何使 li 元素居中对齐,将一个元素换行到下一行?我制作了一个简单的多菜单,其中的项目可以通过鼠标单击打开,但我对解决方案有疑问其中我有困难。如何使 li 元素在使用多菜单的情况下将元素换行到下一行的情况下居中对齐?
$(document).ready(function(e) {
$('.parent').on('click', function(e) {
$r=$(this).find('ul').attr("id");
$check=$("#"+ $r).css('display');
$("#"+ $r).css( {
'display': 'block',
'position': 'absolute',
'z-index': '9999'
}
);
if ($check=="block") {
$("#"+ $r).css( {
'display': 'none'
}
);
}
if ($(this).parent().attr('id')=="menu") {
$("li.parent > ul").not("#"+ $(this).find("ul").attr("id")).css( {
'display': 'none'
}
);
}
return false;
}
);
}
);
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: black;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.child {
display: none;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
background-color: black;
}
.child li a {
color: #FFF;
color: red;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
/*
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
*/
li:hover {
background-color: red;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
color: red;
}
nav {
margin: 0 auto;
display: table;
text-align: center;
}
nav ul {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<nav style="text-align: center;">
<ul id="menu" style="text-align:center !important">
<li class="parent" id="a1">
<a href="#">CAT 1</a>
<ul class="child" id="cat1_1">
<li class="parent" id="a2">
<a href="#">SUB CAT1 <span class="expand">
▼</span></a>
<ul class="child" id="cat1_2">
<li><a href="#">1</a></li>
<li class="parent" id="a3">
<a href="#">SUB CAT1_2<span class="expand">
▼</span></a>
<ul class="child" id="cat1_3">
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<li><a href="#">5</a></li>
</ul>
</li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
</ul>
</li>
<li class="parent" id="b1">
<a href="#">CAT 2</a>
<ul class="child" id="cat2_1">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="parent" id="b2">
<a href="#">SUB CAT 2<span class="expand">
▼</span></a>
<ul class="child" id="cat2_2">
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<ul class="child">
<li><a href="#" nowrap>4</a></li>
<li><a href="#" nowrap>5</a></li>
</ul>
</li>
<li><a href="#">6</a></li>
</ul>
</li>
<li class="parent" id="c1"><a href="#">CAT 3</a>
<li class="parent" id="e1"><a href="#">CAT 4</a>
<li class="parent" id="f1"><a href="#">CAT 5</a>
<li class="parent" id="g1"><a href="#">CAT 6</a>
<li class="parent" id="i1">
<a href="#">CAT 7</a>
<ul class="child" id="cat7_1">
<li><a href="#">1</a></li>
<li class="parent" id="j1">
<a href="#">SUB CAT 7 <span class="expand">
▼</span></a>
<ul class="child" id="cat7_2">
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</li>
<li><a href="#">6</a>
</li>
<li><a href="#">7</a></li>
</ul>
</li>
</ul>
</nav>
您可以为此使用 flex
并删除 float
样式。
nav ul {
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
$(document).ready(function(e) {
$('.parent').on('click', function(e) {
$r=$(this).find('ul').attr("id");
$check=$("#"+ $r).css('display');
$("#"+ $r).css( {
'display': 'block',
'position': 'absolute',
'z-index': '9999'
}
);
if ($check=="block") {
$("#"+ $r).css( {
'display': 'none'
}
);
}
if ($(this).parent().attr('id')=="menu") {
$("li.parent > ul").not("#"+ $(this).find("ul").attr("id")).css( {
'display': 'none'
}
);
}
return false;
}
);
}
);
.parent {
position: relative;
line-height: 30px;
background-color: black;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.child {
display: none;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
background-color: black;
}
.child li a {
color: #FFF;
color: red;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
/*
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
*/
li:hover {
background-color: red;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
color: red;
}
nav {
margin: 0 auto;
}
nav ul {
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<nav style="text-align: center;">
<ul id="menu" style="text-align:center !important">
<li class="parent" id="a1">
<a href="#">CAT 1</a>
<ul class="child" id="cat1_1">
<li class="parent" id="a2">
<a href="#">SUB CAT1 <span class="expand">
▼</span></a>
<ul class="child" id="cat1_2">
<li><a href="#">1</a></li>
<li class="parent" id="a3">
<a href="#">SUB CAT1_2<span class="expand">
▼</span></a>
<ul class="child" id="cat1_3">
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<li><a href="#">5</a></li>
</ul>
</li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
</ul>
</li>
<li class="parent" id="b1">
<a href="#">CAT 2</a>
<ul class="child" id="cat2_1">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="parent" id="b2">
<a href="#">SUB CAT 2<span class="expand">
▼</span></a>
<ul class="child" id="cat2_2">
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<ul class="child">
<li><a href="#" nowrap>4</a></li>
<li><a href="#" nowrap>5</a></li>
</ul>
</li>
<li><a href="#">6</a></li>
</ul>
</li>
<li class="parent" id="c1"><a href="#">CAT 3</a>
<li class="parent" id="e1"><a href="#">CAT 4</a>
<li class="parent" id="f1"><a href="#">CAT 5</a>
<li class="parent" id="g1"><a href="#">CAT 6</a>
<li class="parent" id="i1">
<a href="#">CAT 7</a>
<ul class="child" id="cat7_1">
<li><a href="#">1</a></li>
<li class="parent" id="j1">
<a href="#">SUB CAT 7 <span class="expand">
▼</span></a>
<ul class="child" id="cat7_2">
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</li>
<li><a href="#">6</a>
</li>
<li><a href="#">7</a></li>
</ul>
</li>
</ul>
</nav>
我做了一个简单的多菜单,点击鼠标就可以打开其中的项目,但是我有一个问题很难解决。在使用多菜单的情况下,如何使 li 元素居中对齐,将一个元素换行到下一行?我制作了一个简单的多菜单,其中的项目可以通过鼠标单击打开,但我对解决方案有疑问其中我有困难。如何使 li 元素在使用多菜单的情况下将元素换行到下一行的情况下居中对齐?
$(document).ready(function(e) {
$('.parent').on('click', function(e) {
$r=$(this).find('ul').attr("id");
$check=$("#"+ $r).css('display');
$("#"+ $r).css( {
'display': 'block',
'position': 'absolute',
'z-index': '9999'
}
);
if ($check=="block") {
$("#"+ $r).css( {
'display': 'none'
}
);
}
if ($(this).parent().attr('id')=="menu") {
$("li.parent > ul").not("#"+ $(this).find("ul").attr("id")).css( {
'display': 'none'
}
);
}
return false;
}
);
}
);
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: black;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.child {
display: none;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
background-color: black;
}
.child li a {
color: #FFF;
color: red;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
/*
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
*/
li:hover {
background-color: red;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
color: red;
}
nav {
margin: 0 auto;
display: table;
text-align: center;
}
nav ul {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<nav style="text-align: center;">
<ul id="menu" style="text-align:center !important">
<li class="parent" id="a1">
<a href="#">CAT 1</a>
<ul class="child" id="cat1_1">
<li class="parent" id="a2">
<a href="#">SUB CAT1 <span class="expand">
▼</span></a>
<ul class="child" id="cat1_2">
<li><a href="#">1</a></li>
<li class="parent" id="a3">
<a href="#">SUB CAT1_2<span class="expand">
▼</span></a>
<ul class="child" id="cat1_3">
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<li><a href="#">5</a></li>
</ul>
</li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
</ul>
</li>
<li class="parent" id="b1">
<a href="#">CAT 2</a>
<ul class="child" id="cat2_1">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="parent" id="b2">
<a href="#">SUB CAT 2<span class="expand">
▼</span></a>
<ul class="child" id="cat2_2">
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<ul class="child">
<li><a href="#" nowrap>4</a></li>
<li><a href="#" nowrap>5</a></li>
</ul>
</li>
<li><a href="#">6</a></li>
</ul>
</li>
<li class="parent" id="c1"><a href="#">CAT 3</a>
<li class="parent" id="e1"><a href="#">CAT 4</a>
<li class="parent" id="f1"><a href="#">CAT 5</a>
<li class="parent" id="g1"><a href="#">CAT 6</a>
<li class="parent" id="i1">
<a href="#">CAT 7</a>
<ul class="child" id="cat7_1">
<li><a href="#">1</a></li>
<li class="parent" id="j1">
<a href="#">SUB CAT 7 <span class="expand">
▼</span></a>
<ul class="child" id="cat7_2">
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</li>
<li><a href="#">6</a>
</li>
<li><a href="#">7</a></li>
</ul>
</li>
</ul>
</nav>
您可以为此使用 flex
并删除 float
样式。
nav ul {
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
$(document).ready(function(e) {
$('.parent').on('click', function(e) {
$r=$(this).find('ul').attr("id");
$check=$("#"+ $r).css('display');
$("#"+ $r).css( {
'display': 'block',
'position': 'absolute',
'z-index': '9999'
}
);
if ($check=="block") {
$("#"+ $r).css( {
'display': 'none'
}
);
}
if ($(this).parent().attr('id')=="menu") {
$("li.parent > ul").not("#"+ $(this).find("ul").attr("id")).css( {
'display': 'none'
}
);
}
return false;
}
);
}
);
.parent {
position: relative;
line-height: 30px;
background-color: black;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.child {
display: none;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
background-color: black;
}
.child li a {
color: #FFF;
color: red;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
/*
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
*/
li:hover {
background-color: red;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
color: red;
}
nav {
margin: 0 auto;
}
nav ul {
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<nav style="text-align: center;">
<ul id="menu" style="text-align:center !important">
<li class="parent" id="a1">
<a href="#">CAT 1</a>
<ul class="child" id="cat1_1">
<li class="parent" id="a2">
<a href="#">SUB CAT1 <span class="expand">
▼</span></a>
<ul class="child" id="cat1_2">
<li><a href="#">1</a></li>
<li class="parent" id="a3">
<a href="#">SUB CAT1_2<span class="expand">
▼</span></a>
<ul class="child" id="cat1_3">
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<li><a href="#">5</a></li>
</ul>
</li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
</ul>
</li>
<li class="parent" id="b1">
<a href="#">CAT 2</a>
<ul class="child" id="cat2_1">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="parent" id="b2">
<a href="#">SUB CAT 2<span class="expand">
▼</span></a>
<ul class="child" id="cat2_2">
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<ul class="child">
<li><a href="#" nowrap>4</a></li>
<li><a href="#" nowrap>5</a></li>
</ul>
</li>
<li><a href="#">6</a></li>
</ul>
</li>
<li class="parent" id="c1"><a href="#">CAT 3</a>
<li class="parent" id="e1"><a href="#">CAT 4</a>
<li class="parent" id="f1"><a href="#">CAT 5</a>
<li class="parent" id="g1"><a href="#">CAT 6</a>
<li class="parent" id="i1">
<a href="#">CAT 7</a>
<ul class="child" id="cat7_1">
<li><a href="#">1</a></li>
<li class="parent" id="j1">
<a href="#">SUB CAT 7 <span class="expand">
▼</span></a>
<ul class="child" id="cat7_2">
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</li>
<li><a href="#">6</a>
</li>
<li><a href="#">7</a></li>
</ul>
</li>
</ul>
</nav>