[英]Nested li elements not aligning properly
我能够显示所有嵌套的li's
内联。 我不明白的是,为什么About
和Our Team
li
元素之间存在差距。 我已经尝试将ul
和li
元素的margin
和padding
设置为0
。
<div ng-show = "buttonDisplay" id = "buttonDisplayContent">
<ul>
<li><a href = "#"> Home </a></li>
<li class = "subLi"><a href = "#"> About </a></li>
<ul class = "nested">
<li> <a href = "#"> Our Team </a> </li>
<li> <a href = "#"> Our efforts </a> </li>
</ul>
<li class = "nextToNested"><a href = "#"> Blog </a></li>
<li class = "subLi"><a href = "#"> Services </a></li>
<ul class = "nested">
<li> <a href = "#"> Design </a> </li>
<li> <a href = "#"> Web </a> </li>
<li> <a href = "#"> Learn </a> </li>
<li> <a href = "#"> Invent </a> </li>
</ul>
<li class = "nextToNested"><a href = "#"> Portfolio </a></li>
<li><a href = "#"> Contact </a></li>
</ul>
</div>
的CSS
#buttonDisplayContent ul {
list-style-type: none;
padding: 0;
}
#buttonDisplayContent ul ul {
list-style-type: none;
padding: 0;
}
#buttonDisplayContent ul a {
text-decoration: none;
color: #000;
font-size: 25px;
font-weight: bold;
}
#buttonDisplayContent ul ul a {
text-decoration: none;
color: lightgray;
font-size: 15px;
font-weight: bold;
}
.subLi {
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}
.nested {
margin-left: 0;
}
.nested li {
display: inline-block;
padding-bottom: 6px;
padding-right: 1%;
padding-left: 1%;
padding-top: 8px;
}
#buttonDisplayContent ul li:hover {
background-color: black;
}
更新
感谢你的帮助。 我如下更改了HTML
和CSS
。 Li
元素仍未按要求对齐。 这是一个小提琴: https : //jsfiddle.net/qvq87ke1/2/
的HTML
<div ng-show = "buttonDisplay" id = "buttonDisplayContent" >
<ul>
<li><a href = "#"> Home </a></li>
<li class = "subLi"><a href = "#">About </a>
<ul class = "nested">
<li> <a href = "#"> Our Team </a> </li>
<li> <a href = "#"> Our efforts </a> </li>
</ul>
</li>
<li class = "nextToNested"><a href = "#"> Blog </a></li>
<li class = "subLi"><a href = "#"> Services </a>
<ul class = "nested">
<li> <a href = "#"> Design </a> </li>
<li> <a href = "#"> Web </a> </li>
<li> <a href = "#"> Learn </a> </li>
<li> <a href = "#"> Invent </a> </li>
</ul>
</li>
<li class = "nextToNested"><a href = "#"> Portfolio </a></li>
<li><a href = "#"> Contact </a></li>
</ul>
</div>
的CSS
#buttonDisplayContent {
background-color: #141516;
width: 100%;
margin-top: 9%;
text-align: center;
position: absolute;
opacity: 0.9;
}
#buttonDisplayContent ul {
list-style-type: none;
padding: 0;
}
#buttonDisplayContent ul ul {
list-style-type: none;
padding: 0;
}
#buttonDisplayContent ul a {
text-decoration: none;
color: #fff;
font-size: 50px;
font-weight: bold;
}
#buttonDisplayContent ul ul a {
text-decoration: none;
color: lightgray;
font-size: 40px;
font-weight: bold;
}
.subLi {
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}
.nested {
float: right;
margin-left: 0;
}
.nested li {
display: inline-block;
padding-bottom: 6px;
padding-right: 1%;
padding-left: 1%;
padding-top: 8px;
}
#buttonDisplayContent ul li:hover {
background-color: black;
}
您的标记看起来不正确。 当嵌套无序或有序列表时,它们应与li
一起包含,它们将为其创建子列表。
像这样:
<ul>
<li>One</li>
<li>Two
<ul>
<li>One - Sub Two</li>
<li>Two - Sub Two</li>
</ul>
</li>
<li>Three</li>
</ul>
您要在li
之间添加ul
:
<li class="subLi"><a href="#">About</a></li>
<ul class="nested">
<li><a href="#">Our Team</a></li>
<li><a href="#">Our efforts</a></li>
</ul>
<li class="nextToNested"><a href="#">Blog</a></li>
根据更新的问题更新答案。
尝试设置display:inside;
在嵌套的<ul>
,然后将嵌套的<ul>
放在<li>
PS屏幕截图或小提琴(或至少是纯CSS)会很有帮助。
您应该在代码中发布一个JSFiddle,这样会更容易帮助您。
否则,作为一种好的做法, UL
嵌套嵌套应位于前一个LI
(它应该是父类)。
<li class = "subLi">
<a href = "#">About </a>
<ul class = "nested">
<li> <a href = "#"> Our Team </a> </li>
<li> <a href = "#"> Our efforts </a> </li>
</ul>
</li>
也许这就是问题的根源。
如果它可以帮助您: 制作HTML嵌套列表的正确方法?
祝好运'
浏览器也可能在“ a”元素上有一些填充/边距。 最佳做法是在项目开始时导入reset.css文件 ,以清除所有浏览器应用的CSS并自行或使用框架设置样式。
我想到了。 我不必要地浮动了li
元素。
<div ng-show = "buttonDisplay" id = "buttonDisplayContent" >
<ul>
<li><a href = "#"> Home </a></li>
<li class = "subLi"><a href = "#">About </a>
<ul class = "nested">
<li> <a href = "#"> Our Team </a> </li>
<li> <a href = "#"> Our efforts </a> </li>
</ul>
</li>
<li class = "nextToNested"><a href = "#"> Blog </a></li>
<li class = "subLi"><a href = "#"> Services </a>
<ul class = "nested">
<li> <a href = "#"> Design </a> </li>
<li> <a href = "#"> Web </a> </li>
<li> <a href = "#"> Learn </a> </li>
<li> <a href = "#"> Invent </a> </li>
</ul>
</li>
<li class = "nextToNested"><a href = "#"> Portfolio </a></li>
<li><a href = "#"> Contact </a></li>
</ul>
</div>
萨斯
#buttonDisplayContent
background-color: #141516
width: 100%
margin-top: 9%
text-align: center
position: absolute
opacity: 0.9
#buttonDisplayContent
ul
list-style-type: none
padding: 0
#buttonDisplayContent
ul
ul
list-style-type: none
padding: 0
#buttonDisplayContent
ul
a
text-decoration: none
color: #fff
font-size: 50px
font-weight: bold
#buttonDisplayContent
ul
ul
a
text-decoration: none
color: lightgray
font-size: 40px
font-weight: bold
.subLi
//float: left
margin: 0
padding: 0
list-style-type: none
.nested
//float: right
margin-left: 0
display: inline
.nested
li
display: inline
padding-bottom: 6px
padding-right: 1%
padding-left: 1%
padding-top: 8px
#buttonDisplayContent
ul
li:hover
background-color: black
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.