Question

我有一个在div内用两个输入type =“ radio”构建的时间选择器。浏览器缩放时，收音机不会自动调整和的大小。如何使用CSS获得这种自动调整大小？

问题的照片管理：

Before browser zoom After browser zoom

我的代码是：

<div id="timePeriodSelector" style="font-size: 100%">
<form action="">
<input type="radio" id="timePeriodSelector_default" onclick="Dash.dateTypeSwitcher('default')">Effective Date
<input type="radio" id="timePeriodSelector_secondary" onclick="Dash.dateTypeSwitcher('secondary')">Billing Date
</form>
</div>

Answer 1

    <!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>
</head>
<style>   
    #timePeriodSelector{
        border: 1px dotted black;
    }   
  </style>

<body>
    <div id="timePeriodSelector" style="font-size: 100%">
        <form action="">
        <input type="radio" id="timePeriodSelector_default" onclick="Dash.dateTypeSwitcher('default')">Effective Date
        <input type="radio" id="timePeriodSelector_secondary" onclick="Dash.dateTypeSwitcher('secondary')">Billing Date
        </form>
        </div>
</body>
</html>


It is work correctly in chrome

浏览器缩放时自动调整单选按钮的大小

1 个答案: