html 最小宽度不起作用,最大宽度为空div

n9vozmp4  于 2023-04-18  发布在  其他
关注(0)|答案(2)|浏览(159)

min-width属性对p标签无效。

这是我的预期行为

我的代码:

p {
  max-width: calc(100% - 500px);
  min-width: 10px;
  background-color: #333;
  color: #fff;
}
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae accusantium fuga odio enim, quaerat assumenda in dolorum consequuntur est perspiciatis consectetur temporibus, nulla voluptas ducimus, neque dolorem cum quod autem.</p>
<p>a</p>
lvmkulzt

lvmkulzt1#

我只是猜测你真正想问的是什么,但我的答案是:我会添加width: fit-content来使div自动调整大小为内容宽度。

p {
    max-width: calc(100% - 100px); /* 500px changed to 100px only to make it fit better in this example snippet */
    min-width: 10px;
    width: fit-content;
    background-color: #333;
    color: #fff;
}
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae accusantium fuga odio enim, quaerat assumenda in dolorum consequuntur est perspiciatis consectetur temporibus, nulla voluptas ducimus, neque dolorem cum quod autem.</p>
<p>a</p>
slhcrj9b

slhcrj9b2#

<p>标记使用容器

.my-class {
  max-width: calc(100% - 500px);
  min-width: 10px;
  width: auto;
  display: block;
}

.my-class p {
  display: inline-block;
  background-color: #333;
  color: #fff;
}
<div class='my-class'>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae accusantium fuga odio enim, quaerat assumenda in dolorum consequuntur est perspiciatis consectetur temporibus, nulla voluptas ducimus, neque dolorem cum quod autem.</p>
</div>

<div class='my-class'>
  <p>a</p>
</div>

相关问题