iphone单选按钮使用display flex

Question

我正在使用＆＃34; display：flex;＆＃34;对齐我的单选按钮中的句子，但使用iPhone看起来很奇怪。请看截图：

如果我删除＆＃34;显示：flex;＆＃34;单选按钮看起来很好但文本句子没有在屏幕截图上对齐。

这只发生在不在android中的所有iPhone中。请看下面的示例代码（请在iPhone中运行它，你会看到奇怪的单选按钮大小）

＆＃13;

＆＃13;

.form-check label {
    margin-bottom: 10px;
    font-size: 18px;
    width: 300px;
    display: flex;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

label.form-check-label input {
 margin-right: 10px !important; 
}

＆＃13;

	<div class="form-check">
	<label class="form-check-label">
	<input onclick="sendEvent('#demo-modal-1', 2)" class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" number="1" aria-label="..." value="I have my own ecommerce business"> I have my own ecommerce business (or want to build one)
	</label>
	</div>
	<div class="form-check">
	<label class="form-check-label">
	<input onclick="sendEvent('#demo-modal-1', 2)" class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio2" number="2" aria-label="..." value="I work for an ecommerce company"> I work for an ecommerce company
	</label>
	</div>
	<div class="form-check">
	<label class="form-check-label">
	<input onclick="sendEvent('#demo-modal-1', 2)" class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio3" number="3" aria-label="..." value="I'm a freelancer / solo consultant doing marketing for ecommerce clients"> I'm a freelancer / solo consultant doing marketing for ecommerce clients
	</label>
	</div>
	<div class="form-check">
	<label class="form-check-label">
	<input onclick="sendEvent('#demo-modal-1', 2)" class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio4" number="4" aria-label="..." value="I run or work for a marketing agency"> I run or work for a marketing agency
	</label>
	</div>

＆＃13;

＆＃13;

＆＃13;

请帮助做什么。

先谢谢。

Answer 1

修复！我为输入无线电添加了一个最小宽度