猿问

如何在侧边栏菜单中将 li 放在 ul 上？

所以我有简单的 ul 列表。我应该怎么做才能让 li 保持 ul 的 100% 宽度？请帮忙！我尝试使用 flex-basis 和 flex-drow 但没有帮助。而且它也应该在纯 CSS 中完成。


body{

    margin: 0px;

    height: 100%;

}

.container{

    display: flex;

}

.navigation{

    display: flex;

    flex-direction: column;

    text-align: center;

    width: 20vh;

    height: 100vh;

    text-align:justify;

}

ul li{

border: 1px solid blue;

position: relative;

    list-style-type: none;

    text-align: center;

    

}

ul{

    border: 1px solid blue;

    height: 60vh;

    display: flex;

    flex-direction: column;

    }

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>title</title>

    <link rel="stylesheet" type="text/css" href="style2.css">

</head>

<body>

    <div class="contaniner first">

        <div class="navigation">

            <ul>

                <li>1</li>

                <li>2</li>

                <li>2</li>

                <li>3</li>

                <li>4</li>

            </ul>

        </div>

    </div>

</html>


拉莫斯之舞
浏览 123回答 4
4回答

一只斗牛犬

您必须从ul标记中删除填充。&nbsp; &nbsp; body{&nbsp; &nbsp; margin: 0px;&nbsp; &nbsp; height: 100%;}.container{&nbsp; &nbsp; display: flex;}.navigation{&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; width: 20vh;&nbsp; &nbsp; height: 100vh;&nbsp; &nbsp; text-align:justify;}ul li{border: 1px solid blue;position: relative;&nbsp; &nbsp; list-style-type: none;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp;&nbsp;}ul{&nbsp; &nbsp; border: 1px solid blue;&nbsp; &nbsp; height: 60vh;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;ul{&nbsp;padding: 0px;}&nbsp; <div class="contaniner first">&nbsp; &nbsp; &nbsp; &nbsp; <div class="navigation">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>1</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>2</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>2</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>3</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>4</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>
0

慕工程0101907

ul {&nbsp; border: 1px solid blue;&nbsp;}&nbsp;&nbsp;li {&nbsp; border: 1px solid red;&nbsp; width: 100%;&nbsp;}<ul>&nbsp; <li>1</li>&nbsp; <li>2</li>&nbsp; <li>3</li>&nbsp; <li>1</li></ul>
0

largeQ

超文本标记语言<html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0">&nbsp; &nbsp; <title>title</title>&nbsp; &nbsp; <link rel="stylesheet" type="text/css" href="style2.css"></head><body>&nbsp; &nbsp; <div class="contaniner first">&nbsp; &nbsp; &nbsp; &nbsp; <nav>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>1</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>2</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>2</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>3</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>4</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </nav>&nbsp; &nbsp; </div></html>CSSbody{&nbsp; &nbsp; margin: 0px;&nbsp; &nbsp; height: 100%;}nav ul{&nbsp; &nbsp; border: 1px solid blue;&nbsp; &nbsp; display:flex;&nbsp; &nbsp; padding:5px;}nav ul li{&nbsp; &nbsp; border: 1px solid red;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; list-style:none;&nbsp; &nbsp; width:100%;}您可以display:flex根据需要删除它，它将解决您的问题。
0

慕斯709654

我尝试解决你的问题，这就是你的答案......<html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0">&nbsp; &nbsp; <title>title</title>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; body{&nbsp; &nbsp; margin: 0px;&nbsp; &nbsp; height: 100%;}div .container{&nbsp; &nbsp; display: flex;}div .navigation{&nbsp; &nbsp; display: flex;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; text-align:justify;}ul li{border: 1px solid blue;position: relative;&nbsp; &nbsp; list-style-type: none;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; width: 20vh;&nbsp; &nbsp; height: 10vh;}ul{&nbsp; &nbsp; display: flex;&nbsp; &nbsp; }&nbsp; &nbsp; </style></head><body>&nbsp; &nbsp; <div class="contaniner first">&nbsp; &nbsp; &nbsp; &nbsp; <div class="navigation">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>1</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>2</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>2</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>3</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>4</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></html>
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答