所以我有简单的 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 回答
一只斗牛犬
TA贡献1784条经验 获得超2个赞
您必须从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
TA贡献1887条经验 获得超5个赞
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
TA贡献2039条经验 获得超7个赞
超文本标记语言
<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>
CSS
body{
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
TA贡献1840条经验 获得超5个赞
我尝试解决你的问题，这就是你的答案......
<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>
- 4 回答
- 0 关注
- 122 浏览
添加回答
举报
0/150
提交
取消