Question

我有一个包含大量单元格的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>

显示文字如...

但是，我希望它能在文本右侧显示小标记，就像这样......

如果我更改CSS以指定float: left;，则会在文本前显示标记。

我希望它与文本右侧对齐的原因是，根据列的宽度，可能不清楚哪个文本被标记。

PS。我已经包含了td宽度/高度，以便我可以展示我正在尝试做的事情，在我的最终设计中也没有表格边框。

Answer 1

您可以使用display:inline-block;避免缩小您的圈子并将其全部移除。

＆＃13;

<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>

＆＃13;

Answer 2

请对您的代码进行一些调整：

变化：

hello

要：

<div style="float:left;">hello</div>

并在CSS中

变化：

float:right;

要

float: left;

＆＃13;

<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: left;
}
</style>
</head>
<body>
    <table border=1 cellpadding=0 style="border-collapse: collapse;">
        <tr>
            <td width=150 height=30><div style="float:left;">hello</div>
                <div class='circle'>I</div>
            </td>
        </tr>
    </table>
</body>
</html>

＆＃13;

Answer 3

<div>和<span>之间的主要区别在于它们如何影响布局。

默认情况下，<div>是一个块元素，并且希望独立生效。

默认情况下，<span>是一个内联元素，位于元素之前和之后。

更改为<span>并摆脱浮动将解决问题。虽然您确实需要将其display值设置为inline-block，以允许width和height值正常工作。

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

在表格单元格中的文本旁边绘制小圆圈/标记（未对齐右侧）

3 个答案: