如何在侧边栏菜单中将 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>
拉莫斯之舞4回答
-
一只斗牛犬
您必须从ul标记中删除填充。 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; } ul{ padding: 0px;} <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> -
慕工程0101907
ul { border: 1px solid blue; } li { border: 1px solid red; width: 100%; }<ul> <li>1</li> <li>2</li> <li>3</li> <li>1</li></ul> -
largeQ
超文本标记语言<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"> <nav> <ul> <li>1</li> <li>2</li> <li>2</li> <li>3</li> <li>4</li> </ul> </nav> </div></html>CSSbody{ margin: 0px; height: 100%;}nav ul{ border: 1px solid blue; display:flex; padding:5px;}nav ul li{ border: 1px solid red; text-align: center; list-style:none; width:100%;}您可以display:flex根据需要删除它，它将解决您的问题。 -
慕斯709654
我尝试解决你的问题，这就是你的答案......<html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>title</title> <style> body{ margin: 0px; height: 100%;}div .container{ display: flex;}div .navigation{ display: flex; text-align: center; text-align:justify;}ul li{border: 1px solid blue;position: relative; list-style-type: none; text-align: center; flex-direction: column; width: 20vh; height: 10vh;}ul{ display: flex; } </style></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>
随时随地看视频慕课网APP
相关分类
Html5