鍍金池/ 問(wèn)答/HTML5  HTML/ 請(qǐng)問(wèn)絕對(duì)定位的元素, 如何通過(guò)內(nèi)容寬度自動(dòng)適應(yīng)增加寬度

請(qǐng)問(wèn)絕對(duì)定位的元素, 如何通過(guò)內(nèi)容寬度自動(dòng)適應(yīng)增加寬度

clipboard.png

.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;
}

請(qǐng)問(wèn)如何.warning__dialog根據(jù)內(nèi)部的p標(biāo)簽自動(dòng)增加寬度

回答
編輯回答
獨(dú)白

我暫時(shí)只能想到固定 <p> 的寬度撐開(kāi)容器寬度：

.warning__dialog p {
  white-space: nowrap;
}
2017年11月20日 07:20
編輯回答
礙你眼

把我還難住了，好像不行吧，有興趣看看我的博客http://www.liuweibo.cn

2017年4月13日 10:26
編輯回答
哚蕾咪

根據(jù)你所描述的，我沒(méi)有遇見(jiàn)這個(gè)情況，我在樣式中加入了min-width和max-width的屬性，你可以試試

<!DOCTYPE html>
<html lang="en">

<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 {
  position: relative
}
.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;
  min-width: 50px;
  max-width: 100px
}

</style>
</head>

<body>
<div class="warning__dialog">空</div>
</body>

</html>

2018年5月11日 13:32
編輯回答
厭遇

沒(méi)太看懂問(wèn)題，不設(shè)寬度，直接給padding不行么

2017年8月8日 08:32
編輯回答
懶豬

設(shè)置最小寬度可以，原理還希望懂得哥們出來(lái)解釋下！

min-width: 0;
2017年9月19日 10:58