我找不到任何快速答案。使用起来爽吗display: flex;在表行上（<tr>） 元素？
感觉不对。但如果没有兼容性问题我会这样做
这是我正在谈论的内容的代码笔 https://codepen.io/connorv/pen/boEYOB?editors=1100
input[type="radio"]:checked,
input[type="radio"]:not(:checked) {
position: absolute;
left: -9999px;
}
input[type="radio"]:checked+label,
input[type="radio"]:not(:checked)+label {
position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: #666;
}
input[type="radio"]:checked+label:before,
input[type="radio"]:not(:checked)+label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 2px solid #ddd;
border-radius: 100%;
background: #fff;
}
input[type="radio"]:checked+label:after,
input[type="radio"]:not(:checked)+label:after {
content: '';
width: 14px;
height: 14px;
background: #fc8f3f;
position: absolute;
top: 4px;
left: 4px;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
input[type="radio"]:not(:checked)+label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
input[type="radio"]:checked+label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.dots-wrap form {
width: 700px;
}
.dots-wrap div {
width: 900px;
}
.dots-wrap form,
.dots-wrap div {
display: flex;
justify-content: space-between;
}
.dots-wrap div label {
font-size: 11px;
}
h2.strikethrough {
position: relative;
z-index: 1;
width: 700px;
}
h2.strikethrough:before {
border-top: 2px solid #dfdfdf;
content: "";
margin: 0 auto;
/* this centers the line to the full width specified */
position: absolute;
/* positioning must be absolute here, and relative positioning must be applied to the parent */
top: 32px;
left: 0;
right: 0;
bottom: 0;
width: 95%;
z-index: -1;
}
.dots-wrap form div h2 {
display: flex;
justify-content: space-between;
}
.dots-wrap form div {
width: 100%;
}
.dots-wrap form div h2 p {
margin: 0px;
}
/*dasdfasdfasdfasdfasdfasdfasdf*/
<div class="dots-wrap">
<form action="#">
<div>
<h2 class="strikethrough">
<p>
<a href="#tab-t1">
<input type="radio" id="test1" name="radio-group" checked>
<label for="test1"></label>
</a>
</p>
<p>
<a href="#tab-t2">
<input type="radio" id="test2" name="radio-group">
<label for="test2"></label>
</a>
</p>
<p>
<a href="#tab-t3">
<input type="radio" id="test3" name="radio-group">
<label for="test3"></label>
</a>
</p>
<p>
<a href="#tab-t4">
<input type="radio" id="test3" name="radio-group">
<label for="test4"></label>
</a>
</p>
</h2>
</div>
</form>
<div>
<div>
<label for="test1">Marketing & Lead Generation</label>
</div>
<div>
<label for="test2">Underwriting</label>
</div>
<div>
<label for="test3">Customer Management</label>
</div>
<div>
<label for="test4">Fraud, Collections & Recoveries</label>
</div>
</div>
</div>
在兼容性问题方面，您只需测试不同的浏览器如何呈现应用于表格元素的 Flex 属性。我在 Chrome 中没有看到任何问题。
就最佳实践而言，我也没有看到任何问题。 HTML 表格元素因其语义价值而存在。应用于这些元素的 CSS 没有语义价值。因此，切换表行（tr) 从其默认值display: table-row to display: flex，不会改变语义，只会改变布局。
然而，我认为你正在冒险进入未知领域。您将最古老的 HTML 与最新的 CSS 混合在一起。因为浏览器有长期存在的渲染表格的算法，所以我不会将它们与 flex 属性混合。我预计冲突会把事情搞砸。我会使用 div 来代替。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
