css - 表元素在 Internet Explorer 中没有很好地对齐
问题描述
列表元素未在Internet Explorer中对齐中心。但在Chrome中,元素是居中的。附上示例代码。我正在为所有类使用Bootstrap CSS 框架。
这是 JSfiddle
https://jsfiddle.net/8cunpsvy/
HTML:
<div class="card-body">
<table class="table-sm table-hover">
<thead>
<tr class="text-center">
<th class="w-25" scope="col"></th>
<th style="width: 54%" scope="col"></th>
<th style="width: 10%" scope="col">Actual</th>
<th style="width: 1%;" scope="col">Status</th>
<th style="width: 10%" scope="col">Expected</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td class="text-center">2/13/2019</td>
<td class="text-center">
<ul class="status-circle"><li></li></ul>
</td>
<td class="text-center"></td>
</tr>
</tbody>
</table>
</div>
CSS:
.status-circle {
list-style: none;
margin: 0;
padding-inline-start: 0;
margin-block-start: 0;
margin-block-end: 0;
border-spacing: 0px;
line-height: 0;
}
.status-circle li {
display: inline-block;
border-radius: 50%;
border: 1px solid #000;
width: 15px;
height: 15px;
background: #737373;
}
解决方案
我已将里面的元素更改为 div 并从 li 元素中转移所有样式并添加内容。
HTML:
<div class="card-body">
<table class="table-sm table-hover">
<thead>
<tr class="text-center">
<th class="w-25" scope="col"></th>
<th style="width: 54%" scope="col"></th>
<th style="width: 10%" scope="col">Actual</th>
<th style="width: 1%;" scope="col">Status</th>
<th style="width: 10%" scope="col">Expected</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td class="text-center">2/13/2019</td>
<td class="text-center">
<div class="div-status-circle"></div>
</td>
<td class="text-center"></td>
</tr>
</tbody>
</table>
</div>
CSS:
.div-status-circle {
display: inline-block;
border-radius: 50%;
border: 1px solid #000;
width: 15px;
height: 15px;
content: "";
background: #737373;
}
推荐阅读
- python - Keras MultiGPU 训练失败并显示错误消息“IndexError: pop from empty list”
- pandas - 有没有办法在读取 AnnData 对象后对其进行子集化?
- r - 1 中的错误 | country : 只能对数字、逻辑或复杂类型进行操作
- kotlin - 使用 Kotlin 进行改造 - 无法对数据进行建模
- python - 在第一次出现后插入标签
我有如下所示的 HTML:
<table class="table table-dark"><thead> </thead></table>`
<table>
HTML 页面上还有其他标签。我想要它,以便我可以<table>
在上述<table>
- html - 如何在 Plone5 中用 diazo Rules.xml 替换嵌套元素
- android - Android Studio 未按照 Spotify SDK 的说明显示文件 -> 新 -> 新模块选项
- python - 如何使用外键在 Django 中自动完成表单?
- python - 用于自动将文档归档到正确文件夹的机器学习方法
- python - 为什么 python selenium 有时发送键不输入我的键?