css - 响应式按钮设计

Question

所以我想要实现的是使这个带有 Buff 文本的 div 填充区域这里是它现在的样子的图片 http://i.imgur.com/V00gAs8.png但是当我调整浏览器大小时 http://i.imgur.com/XlHvWEN.png

<div style="overflow: auto;width: 100%; min-height: 41px; max-height: 100%; position: relative;">
        <div style="background-color: #80DE57; color: white; float: right; text-align: center;width:  10%;height: 8%%;max-height:  100%;">BUFF</div>

        <p style="margin: 0 1% 0 1%;word-break: break-all ">
    d   4444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444                                
        </p>
</div>

编辑: 我也想让高度一直填满这个div

Answer 1

您的 Buff div 的宽度为 10%，因此它自然会随着屏幕尺寸的减小而缩小。给它一个固定的宽度，但使用 em 单位而不是 px 单位，这样大小就会根据用户使用的文本大小进行调整。例如:

width: 5em;   // (choose a suitable value to give a sensible width