Question

我有一个表格显示问题/解决状态列表。

这是一个示例行

如您所见，使用margin-left CSS缩进分辨率，宽度设置为100％，但它会溢出到下一个单元格中。

我已经尝试了display: inline / inline-block / inline-table以及float: left和overflow-x: hidden的所有变体，但我无法让“银条”留在TD内。

ETA：我对CSS不太聪明:(但我正在尝试：）

标记

<div id="Log">
    <table style="width: 100%">
        <tr>
            /* other cells removed */

            <td>
                @Html.DisplayFor(model => item.LogEntry.Status)
                @if (!string.IsNullOrWhiteSpace(item.LogEntry.ResetMessage))
                {
                    <br />
                    <span class="reset">
                        @Html.DisplayFor(model => item.LogEntry.ResetMessage)
                    </span>
                }
            </td>

            /* other cells removed */
        </tr>
    </table>
</div>

CSS

#Log {
}

    #Log > table {
        color: white;
        margin-top: 5px;
        margin-bottom: 5px;
    }
        #Log > table tr th {
            background-color: darkblue;
        }

        #Log > table tr td {
            background-color: midnightblue;
        }

        #Log > table tr th,
        #Log > table tr td {
            border: thin solid white;
            vertical-align: top;
            color: white;
            padding: 5px;
        }

        #Log > table tr td .reset {
            background-color: Silver;
            padding-left: 10px;
            margin-left: 20px;
            width: 100%;
            display: inline-block;
        }

Answer 1

因为您已将100%设置为calc，所以它会将子元素的宽度设置为父元素的宽度。无论是否有缩进。

要解决此问题，您可以使用CSS函数#Log > table tr td .reset { background-color: Silver; padding-left: 10px; margin-left: 20px; width: calc(100% - 20px); // using the calc function to set width // to 100% negative the 20px added on by // the margin-left indentation display: inline-block; }：

20px

您当然可以将KUBE_ARGS="--cluster-dns=10.10.0.10 --cluster-domain=cluster.local"替换为您需要的任何内容。

我希望这会有所帮助： - ）

内部溢出的跨度有保证金

1 个答案: