这里是服务器端开发,涉足 html/css 设计。
我有三个单选按钮,我将其样式设置为“可单击”框。这就是我的意思:
以上是我笔记本电脑的 Firefox(Ubuntu 操作系统)上的选项外观。
问题是,在移动 chrome/safari/opera 等设备上查看时,相同的最终结果看起来明显不一致。请亲自查看:
我盯着代码看了很久,也没找到bug。专家可以帮我解决这个问题吗?
这是我的代码:
/* Hide the browser's default checkbox */
.checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.label {
background: white;
padding: 7px 10px;
height: 46px;
width: 260px;
border: 1px solid #3cb7dd;
margin-bottom: -1px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.fx {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.fxjscn {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.fxaicn {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.mbl {
margin-bottom: 1em;
}
.mts {
margin-top: 0.5em;
}
.lsp {
line-height: 1.55;
}
.clb {
color: #404040;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
<div class="clb mbl mts" style="border:3px solid #ececec;border-radius:12px;overflow:hidden;background:snow;max-width:500px;margin-left:auto;margin-right:auto;width:97%">
<div style="margin: 0 auto;text-align: center;">
<input type="radio" name="aud" class="checkbox" id="aud-first" value="1">
<label class="label" for="aud-first" style="border-top-left-radius:8px;border-top-right-radius:8px;display: inline-flex;align-items: center;">
<div class="fx fxjscn fxaicn">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlkqOVnCqMpCCYnJf2TB-cm7mfmZGC914FbZZxetEZDJCJqdqqfQ" width="30" height="30" style="padding:0 10px">
<div class="sp lsp" style="padding:0 10px;text-align:left">Lorem ipsum dolor sit amet, consectetur</div>
</div>
</label>
<input type="radio" name="aud" class="checkbox" id="aud-second" value="2">
<label class="label" for="aud-second" style="display: inline-flex;align-items: center;">
<div class="fx fxjscn fxaicn">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlkqOVnCqMpCCYnJf2TB-cm7mfmZGC914FbZZxetEZDJCJqdqqfQ" width="30" height="30" style="padding:0 10px">
<div class="sp lsp" style="padding:0 10px;text-align:left">Lorem ipsum dolor sit amet, consectetur</div>
</div>
</label>
<input type="radio" name="aud" class="checkbox" id="aud-third" value="3">
<label class="label" for="aud-third" style="border-bottom-left-radius:8px;border-bottom-right-radius:8px;display: inline-flex;align-items: center">
<div class="fx fxjscn fxaicn">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlkqOVnCqMpCCYnJf2TB-cm7mfmZGC914FbZZxetEZDJCJqdqqfQ" width="30" height="30" style="padding:0 10px">
<div class="sp lsp" style="padding:0 10px;text-align:left">Lorem ipsum dolor sit amet, consectetur</div>
</div>
</label>
</div>
</div>
请原谅我在代码中添加了一些额外的装饰。它们已被包含在内,以防它们是造成上述错位的罪魁祸首(它们是原始代码的一部分)。
注意:通过以下链接直接在移动浏览器中检查错位:https://codepen.io/mhb11/pen/BaBpxrr这完全与我在问题中包含的代码相同。
最佳答案
不太清楚为什么,但它与 inline-flex
和与内联元素相关的空白有关(或者可能是一个简单的错误)。使用 flex
代替,您将不会遇到问题。由于您正在固定元素的宽度,因此您将获得相同的输出:
/* Hide the browser's default checkbox */
.checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.label {
background: white;
padding: 7px 10px;
height: 46px;
width: 260px;
border: 1px solid #3cb7dd;
margin:0 auto -1px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.fx {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.fxjscn {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.fxaicn {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.mbl {
margin-bottom: 1em;
}
.mts {
margin-top: 0.5em;
}
.lsp {
line-height: 1.55;
}
.clb {
color: #404040;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
<div class="clb mbl mts" style="border:3px solid #ececec;border-radius:12px;overflow:hidden;background:snow;max-width:500px;margin-left:auto;margin-right:auto;width:97%">
<div style="margin: 0 auto;">
<input type="radio" name="aud" class="checkbox" id="aud-first" value="1">
<label class="label" for="aud-first" style="border-top-left-radius:8px;border-top-right-radius:8px;display: flex;align-items: center;">
<div class="fx fxjscn fxaicn">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlkqOVnCqMpCCYnJf2TB-cm7mfmZGC914FbZZxetEZDJCJqdqqfQ" width="30" height="30" style="padding:0 10px">
<div class="sp lsp" style="padding:0 10px;text-align:left">Lorem ipsum dolor sit amet, consectetur</div>
</div>
</label>
<input type="radio" name="aud" class="checkbox" id="aud-second" value="2">
<label class="label" for="aud-second" style="display: flex;align-items: center;">
<div class="fx fxjscn fxaicn">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlkqOVnCqMpCCYnJf2TB-cm7mfmZGC914FbZZxetEZDJCJqdqqfQ" width="30" height="30" style="padding:0 10px">
<div class="sp lsp" style="padding:0 10px;text-align:left">Lorem ipsum dolor sit amet, consectetur</div>
</div>
</label>
<input type="radio" name="aud" class="checkbox" id="aud-third" value="3">
<label class="label" for="aud-third" style="border-bottom-left-radius:8px;border-bottom-right-radius:8px;display: flex;align-items: center">
<div class="fx fxjscn fxaicn">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlkqOVnCqMpCCYnJf2TB-cm7mfmZGC914FbZZxetEZDJCJqdqqfQ" width="30" height="30" style="padding:0 10px">
<div class="sp lsp" style="padding:0 10px;text-align:left">Lorem ipsum dolor sit amet, consectetur</div>
</div>
</label>
</div>
</div>
关于html - 诊断 div 未对准,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57625859/