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

发布于
2018-02-06

.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标签自动增加宽度

javascript css css3 前端

阅读 3.1k

5 个回答

得票最新

Meathill

22.6k133642

发布于
2018-02-06

我暂时只能想到固定 <p> 的宽度撑开容器宽度：

.warning__dialog p {
  white-space: nowrap;
}

吴华祥

20516

发布于
2018-02-07

根据你所描述的，我没有遇见这个情况，我在样式中加入了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>

</html>