[英]ul li css not working properly
Got a strange issue:遇到一个奇怪的问题:
In my .cshtml I have a second thing:在我的 .cshtml 中,我有第二件事:
<ul>
<li>Test</li>
<li>Test2
<ul>
<li>Test3</li>
</ul>
</li>
<li>Test4
<ul>
<li>Test5</li>
</ul>
<ul>
<li>Test6</li>
</ul>
</li>
</ul>
Which supposed to work like this:应该像这样工作:
Test
Test2
Test3
Test4
Test5
Test6
BUT instead of it, it works this way:但不是它,它是这样工作的:
Test
Test2
Test3
Test4
Test5
Test6
The only thing I have in css for this is list-style: none;
我在 css 中唯一的东西是list-style: none;
Also main <ul>
is placed inside of <div>
which have text-align: left;
主要的<ul>
也放在<div>
里面,它有text-align: left;
(without it, all items are centered). (没有它,所有项目都居中)。
I am a newbie speaking of css so, I can't get, what I am missing.我是一个谈到 css 的新手,所以我无法理解我所缺少的。
EDIT: Forgot one thing.编辑:忘记了一件事。 This works fine in jsfiddle.这在 jsfiddle 中工作正常。
Just reset all your styles and give </li>
.只需重置所有样式并给出</li>
。 You are using <li>
only for opening and closing it:您使用<li>
仅用于打开和关闭它:
<ul> <li>Test</li> <li>Test2 <ul> <li>Test3</li> </ul> </li> <li>Test4 <ul> <li>Test5</li> </ul> <ul> <li>Test6</li> </ul> </li> </ul>
Your Mistake你的错误
<ul>
<li>Test<li> <!-- Should be </li> not <li> -->
<li>Test2
<ul>
<li>Test3</li>
</ul>
<li><!-- Should be </li> not <li> -->
<li>Test4
<ul>
<li>Test5</li>
</ul>
<ul>
<li>Test6</li>
</ul>
<li><!-- Should be </li> not <li> -->
</ul>
Preview:预览:
Just check this out...看看这个...
OR或者
Provide the CSS you have used..提供您使用过的CSS ..
div { text-align: left; } ul { list-style: none; }
<div> <ul> <li>Test</li> <li>Test2 <ul> <li>Test3</li> </ul> </li> <li>Test4 <ul> <li>Test5</li> </ul> <ul> <li>Test6</li> </ul> </li> </ul> </div>
The solution that I came up with is that you should wrap your un-ordered list with div tag that has a class name.我想出的解决方案是,您应该使用具有类名的 div 标签包装您的无序列表。 Ex.前任。 <div class="test"></div>
HTML: HTML:
<div class="test">
<ul>
<li>Test</li>
<li>Test2
<ul>
<li>Test3</li>
</ul>
</li>
<li>Test4
<ul>
<li>Test5</li>
</ul>
<ul>
<li>Test6</li>
</ul>
</li>
</ul>
</div>
CSS CSS
.test ul li {
list-style: none;
text-align: left;
}
I guess this might be your issue.我想这可能是你的问题。
padding:0px;
margin:0px;
ul li ul { padding:0px; }
<ul> <li>Test</li> <li>Test2 <ul> <li>Test3</li> </ul> </li> <li>Test4 <ul> <li>Test5</li> </ul> <ul> <li>Test6</li> </ul> </li> </ul>
ANSWER回答
Note : So remove padding property from your
ul
CSS.注意:所以从你的ul
CSS 中删除 padding 属性。
ul li ul { /* padding:0px; REMOVE IT If It's 0PX' */ }
<ul> <li>Test</li> <li>Test2 <ul> <li>Test3</li> </ul> </li> <li>Test4 <ul> <li>Test5</li> </ul> <ul> <li>Test6</li> </ul> </li> </ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.