gpt4 book ai didi

html - 在表格单元格中的文本旁边绘制小圆圈/标志(未右对齐)

转载 作者:行者123 更新时间:2023-11-28 15:10:10 25 4
gpt4 key购买 nike

我有一个 HTML 表格,里面有很多单元格。其中一些单元格应标记为警告,其他单元格应标记为警报。

我想出了以下 HTML/CSS 来做这样的事情。

<html>
<head>
<style>
.circle {
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 12px;
color: #fff;
line-height: 16px;
text-align: center;
background: #ff0000;
float: right;
}
</style>
</head>
<body>
<table border=1 cellpadding=0 style="border-collapse: collapse;">
<tr>
<td width=150 height=30>hello
<div class='circle'>I</div>
</td>
</tr>
</table>
</body>
</html>

它显示的文本如...

enter image description here

但是,我希望它显示在文本右侧的小旗子上,就像这样......

enter image description here

如果我更改 CSS 以指定 float: left;,这会在文本前显示标志。

我希望它与文本右侧对齐的原因是,根据列的宽度,标记的文本可能并不明显。

附言。我已经包括了 td 宽度/高度,以便我可以演示我正在尝试做什么,在我的最终设计中也没有表格边框。

最佳答案

您可以通过使用 display:inline-block; 并一起移除 float 来避免缩小您的圈子。

<html>
<head>
<style>
.circle {
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 12px;
color: #fff;
line-height: 16px;
text-align: center;
background: #ff0000;
display: inline-block;
}
</style>
</head>
<body>
<table border=1 cellpadding=0 style="border-collapse: collapse;">
<tr>
<td width=150 height=30>hello
<div class='circle'>I</div>
</td>
</tr>
</table>
</body>
</html>

关于html - 在表格单元格中的文本旁边绘制小圆圈/标志(未右对齐),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48588009/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com