我有以下html和css。
我希望div class="webpushPowered" 具有最小宽度为 35px 的响应宽度。我想对按钮大小做出响应。
基本上，我希望div class="webpushPowered" 根据div class="webpushButtons" 的宽度进行调整，如果我在按钮内有更多或更少的文本，它可以增加或减少。
我只使用HTML和CSS，没有外部代码。 此代码适用于桌面，我的问题出在移动设备上，因此请调整其大小，以便您可以看到我在说什么。
我附加的图像是三星Galaxy S6中此代码的结果。
这是移动结果的图像
谢谢！
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: none !important;
margin: 0;
}
.webPushIframe {
position: absolute;
z-index: 999999999;
display: block;
border: none;
background-color: transparent;
width: 100%;
max-width: 450px;
min-width: 320px;
min-height: 130px;
height: 100%;
}
.webPushSolicitation {
max-width: 450px;
min-width: 350px;
min-height: 130px;
background: none;
border: 0 !important;
box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.06) !important;
-webkit-box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.06) !important;
}
.webPushSolicitation .webPushContainner {
}
.webPushSolicitation .webPushContainner .webPushImage {
width: 85px;
height: 85px;
display: block;
float: left;
text-align: center;
}
.webPushSolicitation .webPushContainner .webPushImage img {
width: 65px;
margin: 20px;
}
.webPushSolicitation .webPushContainner .webPushTexts {
display: block;
float: right;
max-width: 320px;
min-width: 320px;
padding: 20px 20px 0 0;
}
.webPushSolicitation .webPushContainner .webPushTexts .webPushTitle {
font-weight: 700;
font-weight: bold;
margin-bottom: 10px;
}
.webPushSolicitation .webPushContainner .webPushTexts .webPushText {
word-break: break-word;
margin-right:10px;
max-height: 62px;
overflow: hidden;
}
.webPushSolicitation .webPushContainner .webPushPowered {
width: 80px;
height: 10px;
display: block;
float: left;
font-size: 9px;
margin-top: 28px;
margin-left: 18px;
}
.webPushSolicitation .webPushContainner .webPushPowered a,
.webPushSolicitation .webPushContainner .webPushPowered a:link,
.webPushSolicitation .webPushContainner .webPushPowered a:hover,
.webPushSolicitation .webPushContainner .webPushPowered a:visited,
.webPushSolicitation .webPushContainner .webPushPowered a:active {
font-size: xx-small;
text-decoration: none;
}
.webPushSolicitation .webPushContainner .webPushPowered img {
width: 80px;
margin: 25px 20px 20px 20px;
}
.webPushSolicitation .webPushContainner .webPushButtons {
display: block;
float: right;
margin: 20px;
}
.webPushSolicitation .webPushContainner .webPushButtons .confirm,
.webPushSolicitation .webPushContainner .webPushButtons .deny {
border-radius: 3px;
padding: 6px 10px;
display: block;
float: right;
margin-left: 5px;
cursor: pointer;
}
.webPushConfirmation {
max-width: 450px;
min-width: 160px;
background: none;
border: 0 !important;
box-shadow: 0 0 7px 2px rgba(0, 0, 0, 0.25) !important;
-webkit-box-shadow: 0 0 7px 2px rgba(0, 0, 0, 0.25) !important;
}
.webPushConfirmation .webPushConfirmationImage {
text-align: center;
padding: 50px 0;
}
.webPushConfirmation .webPushConfirmationImage img {
max-width: 400px;
max-height: 100px;
}
.webPushConfirmation .webPushConfirmationTexts {
display: block;
text-align: center;
padding: 10px;
}
.webPushConfirmation .webPushConfirmationTexts .webPushConfirmationTitle {
font-weight: bold;
margin-bottom: 10px;
}
.webPushConfirmation .webPushConfirmationPowered {
text-align: center;
display: block;
padding: 20px 0;
}
.webPushConfirmation .webPushContainner .webPushConfirmationPowered img {
width: 80px;
}
@media (max-width: 430px) {
.webPushIframe {
min-height: 250px;
}
.webPushSolicitation .webPushContainner .webPushImage {
width: 100%;
}
.webPushSolicitation .webPushContainner .webPushTexts {
max-width: 100%;
padding: 20px 10px;
}
}<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://dev-egoiapp2.com/wp/css/wp.css">
<title>WebPush App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
</head>
<body>
<div class="webPushSolicitation">
<div class="webPushContainner" style="background-color: #F3F3F3;">
<div class="webPushImage">
<img src="https://egoiapp2.com/img/default-pushicon.png">
</div>
<div class="webPushTexts">
<div class="webPushTitle" style="color: #364656;">Novidades? Nós avisamos!</div>
<div class="webPushText" style="color: #364656;">Sempre que tivermos coisas novas para si, vai ver uma mensagenzinha no seu ecrã :)</div>
<input type="email" placeholder="E-mail" id="email" name="email" style="display:none;">
</div>
<div style="clear: both; margin-top: 5px"></div>
<div>
<div class="webPushPowered" style="color: #364656;">
<a href="https://google.pt" target="_blank" style="color: #364656;">
Powered by <b>test</b>
</a>
</div>
<div class="webPushButtons">
<div class="deny" style="color: #F0F0F0; background-color: #364656;" onclick="webPush.denyNotification();" href="#">Agora não</div>
<div class="confirm" style="color: #F0F0F0; background-color: #00AEDA;" onclick="webPush.openAuthorizePopUp();" href="#">Quero receber alertas!</div>
</div>
</div>
<div style="clear: both"></div>
</div>
</div>
</body></html>发生这种情况是因为.webPushSolicitation .webPushContainner .webPushButtons中的margin: 20px。您可以设置margin-left: 0，例如