ul li css 無法正常工作

Question

遇到一個奇怪的問題：

在我的 .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>

應該像這樣工作：

Test
Test2
     Test3
Test4
     Test5
     Test6

但不是它，它是這樣工作的：

Test
Test2
Test3
Test4
Test5
Test6

我在 css 中唯一的東西是list-style: none; 主要的<ul>也放在<div>里面，它有text-align: left; （沒有它，所有項目都居中）。

我是一個談到 css 的新手，所以我無法理解我所缺少的。

編輯：忘記了一件事。 這在 jsfiddle 中工作正常。

Answer 1

只需重置所有樣式並給出</li> 。 您使用<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>

你的錯誤

<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>

預覽：

Answer 2

看看這個...

或者

提供您使用過的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>

Answer 3

我想出的解決方案是，您應該使用具有類名的 div 標簽包裝您的無序列表。 前任。 <div class="test"></div>

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

.test ul li {
    list-style: none;
    text-align: left; 
}

Answer 4

我想這可能是你的問題。

• 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>

回答

注意：所以從你的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>