猿问

请问绝对定位的元素, 如何通过内容宽度自动适应增加宽度

.warning__dialog:{

    position: absolute;

    top: 30px;

    right: 0;

    z-index: 2;

    display: table;

    background: rgba(230, 0, 68, 0.8);

    color: #fff;

    border-radius: 4px;

    padding: 0.1rem;

}

请问如何.warning__dialog根据内部的p标签自动增加宽度

米琪卡哇伊
浏览 1372回答 4
4回答

慕慕森

我暂时只能想到固定 <p> 的宽度撑开容器宽度:.warning__dialog p {&nbsp; white-space: nowrap;}

慕虎7371278

根据你所描述的,我没有遇见这个情况,我在样式中加入了min-width和max-width的属性,你可以试试<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body {&nbsp; position: relative}.warning__dialog {&nbsp; position: absolute;&nbsp; top: 30px;&nbsp; right: 0;&nbsp; z-index: 2;&nbsp; display: table;&nbsp; background: rgba(230, 0, 68, 0.8);&nbsp; color: #fff;&nbsp; border-radius: 4px;&nbsp; padding: 0.1rem;&nbsp; min-width: 50px;&nbsp; max-width: 100px}</style></head><body><div class="warning__dialog">空</div></body></html>

慕容3067478

设置最小宽度可以,原理还希望懂得哥们出来解释下!min-width:&nbsp;0;
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答