[英]Ul , Ol not showing numbers and circle
嗨,我似乎在ol和ul标签上没有显示一些问题,未在左侧syde上显示数字和圆圈。我没有使用reset css。这是我的代码:
<ol>
<li>ALL FILES</li>
<li>PHP SCRIPTS</li>
<li>WORDPRESS</li>
<li>JAVASCRIPT</li>
<li>CSS MOBILE</li>
</ol>
<ul>
<li>ALL FILES</li>
<li>PHP SCRIPTS</li>
<li>WORDPRESS</li>
<li>JAVASCRIPT</li>
<li>CSS MOBILE</li>
</ul>
<ul>
<li>ALL FILES</li>
<li>PHP SCRIPTS</li>
<li>WORDPRESS</li>
<li>JAVASCRIPT</li>
<li>CSS MOBILE</li>
</ul>
<ul>
<li>ALL FILES</li>
<li>PHP SCRIPTS</li>
<li>WORDPRESS</li>
<li>JAVASCRIPT</li>
<li>CSS MOBILE</li>
</ul>
#menu .dropdown_3columns li {
float: none;
position: static;
text-align: left;
}
#menu li {
border: medium none;
display: block;
float: left;
height: 28px;
margin-left: 0;
padding-left: 18px;
padding-right: 18px;
padding-top: 8px;
position: relative;
text-align: center;
}
如何让ol an ul显示数字和圆圈?
编辑:将鼠标悬停在列表上即可查看我的意思:
删除display:block; 在#menu li中并删除list-style-type:十进制;
#menu li {
display: block; //remove this line
}
并删除
#menu .dropdown_3columns ol, #menu .dropdown_3columns ul{
list-style-type: decimal; //remove this line
}
................................................... ...
现在您好删除对#menu li display:block;
像这样
#menu li{
display:block; // remove this line
}
正如提到的其他答案一样,问题是由li元素设置为display: block
而引起的display: block
这使它们占据了为其设置的整个宽度,并迫使数字或项目符号离开可见区域。
要解决此问题,请从
#menu li {
display: block;
padding-left: 18px;
}
对此:
#menu li {
display: inline-block; /* prevents the bullets being forced off the left-hand side, but still allows padding to be applied */
padding-left: 8px;
margin-left: 10px; /* This gives enough room for the bullets to be shown */
}
您还应在本节中将所有li
元素设置为十进制:
#menu .dropdown_3columns ol,
#menu .dropdown_3columns ul {
float: left;
margin-top: 40px;
margin-bottom: 25px;
list-style-type: decimal;
}
因此,如果您要使用项目符号而不是数字,请在本节后添加以下内容:
#menu .dropdown_3columns ul {
list-style-type: disc; /* or circle etc */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.