带有换行文本的 <li> 标签导致其父 div 的宽度扩大?

<li> tag with wrapping text is causing its parent div to expand in width?

提问人:Kana 提问时间:10/31/2023 最后编辑:showdevKana 更新时间:10/31/2023 访问量:35

问:

想澄清一下为什么会发生这种情况。

我有一个父 div,设置为width:70%

在父 div 中,我还有两个并排的 div。左边的 div 有 ,而右边的 div 没有类。正如我所料,左边的 div 是父 div 宽度的 15%。width:15%

但是,当我添加一个包含大量文本的标签时,文本换行到下一行时,左侧 div 的宽度似乎缩小了。它比父 div 的 15% 宽度窄。<li>

更改以解决问题,但我想知道原因。width: 15%min-width: 15%

body {
  background: #6e28d9;
  padding: 0 24px;
  color: white;
  /* Change my color to yellow */
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.parent {
  width: 70%;
  display: flex;
  border-style: solid;
  border-width: 2px;
  border-color: white;
}

.left {
  width: 15%;
}
<div class="parent">
  <div class="left">
    Left
  </div>
  <div>
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
      <li>"Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</li>
    </ul>
  </div>
</div>

https://playcode.io/1647378

CSS HTML 列表

评论


答:

0赞 Muhammad Usman 10/31/2023 #1

问题出在左边的内容上

<style>

    body {
  background: #6e28d9;
  padding: 0 24px;
  color: white;
  /* Change my color to yellow */
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.parent {
  width: 70%;
  display: flex;
  border-style: solid;
  border-width: 2px;
  border-color: white;
}

.left {
    width: 15%;
}

.list {
    width: 85%;
} 
</style>
<div class="parent">
    <div class="left">
      Left
    </div>
    <div class="list">
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <li>"Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</li>
      </ul>
    </div>
  </div>

.由于列表 div 没有指定的宽度,因此它占用了所有可用空间,而忽略了 left 的 width 属性。

评论

0赞 Kana 11/1/2023
如果列表 div 没有指定的宽度,为什么要忽略左侧 div 的 width 属性?它不应该占用所有剩余的可用空间,同时遵循左边的宽度属性吗?
0赞 Muhammad Usman 11/1/2023
不,它可能用鲜血占领了别人的土地。尽管它占用是因为该宽度中没有内容。
0赞 pupupupu 10/31/2023 #2
<!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">
    <title>Document</title>
    <style>
        body {
  background: #6e28d9;
  padding: 0 24px;
  color: white;
  /* Change my color to yellow */
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

}

.parent {
  width: 70%;
  display: flex;
  border-style: solid;
  border-width: 2px;
  border-color: white;
}

.left {
  width: 15%;
  flex-shrink: 0;
}

    </style>
</head>
<body>
    <div class="parent">
        <div class="left">
          Left
        </div>
        <div>
          <ul>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis velit et similique quo aut ea, in sunt eum dolorem unde sit non tenetur reiciendis eaque, sapiente explicabo facilis, doloremque eius.</li>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus et explicabo suscipit excepturi ipsum voluptatem. Mollitia, adipisci. Quae, sit deleniti! Nisi vitae dolorum voluptate esse vel consectetur deserunt repellat fuga!</li>
          </ul>
        </div>
      </div>
</body>
</html>

您已设置 display: flex;,这允许父元素中的子元素根据需要调整自己的大小。即使您为左侧元素设置了固定宽度,在调整父元素大小时,它仍可能发生变化