为什么填充应用到item3，即使我没有应用它.我只把它应用到项目上

我尝试只对item4应用填充，但它也应用于item3, item3内的文本也不像我期望的那样居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="flexbox.css">
    <title>flexbox</title>
</head>
<body>
  <div class="container">
  <div class="container2">
    <p class="item1">item1</p>
    <p class="item2">item2</p>
  </div>  
  
  <div class="container2">
    <p class="item3">item3</p>
    <p class="item4">item4</p>
    
  </div>
</div>
</body>
</html>

--------------------------------------///css//------------------------------------------------------

.container{
    border: 1px solid black;
    background-color: rgb(255, 157, 0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline:1rem;
}
.container2{
    display: flex;
    gap: 2em;
}
.container2 p{
    background-color: blue;
    border: 1px solid black;
  
}
.item4{
    padding:1rem;
    
}

我试着只对item4应用填充，但它也被应用到item3, item3内的文本也不像我期望的那样居中。

下面的CSS修复你的问题，设置容器2的对齐方式，并显式设置item3的高度-由于在同一个容器中，它与item4一起增长，它实际上没有得到填充，只是高度:)

.container{
    border: 1px solid black;
    background-color: rgb(255, 157, 0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline:1rem;
}
.container2{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2em;
}
.container2 p{
    background-color: blue;
    border: 1px solid black;
    
}
.item3{height: min-content;}
.item4{
    padding:1rem;
    
}

如果我可以建议一个替代的解决方案，使用css网格:

相关内容

最新更新

热门标签：