所以我有簡單的 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條經驗 獲得超8個贊
超文本標記語言
<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 關注
- 205 瀏覽
添加回答
舉報
0/150
提交
取消