时间戳

首页 > 解决方案 > CSS 浮动和文本对齐仅作为内联工作

html - CSS 浮动和文本对齐仅作为内联工作

问题描述

我有一个使用 ASP .net core 2.1 完成的应用程序。我修改它是脚手架的crud详细信息页面。但是我被困在 dl、dt 和 dd 元素上。

dt 元素中包含字段名称的文本与右侧相邻。而且无论我做什么，我都无法更改它，除非我添加了内联样式代码。我将下面的代码放在文件的样式部分：

<style>
    dd {
        min-width: 120px;
        background: #dd0
    }

    dt {
        float: left;
        background: #cc0;
        text-align: left;
    }
</style>

此代码在浮动和文本对齐方面没有任何变化，但它确实对背景生效，如下图所示。 它适用于前两行

但是当我像下面那样将这些显示设置内联时，它对于上图中的那些行就很好了。

<dt style="text-align: left; max-width: 70px;">
                        @Html.DisplayNameFor(model => model.PatientName)
                    </dt>
                    <dd>
                        @Html.DisplayFor(model => model.PatientName)
                    </dd>
                    <dt style="text-align: left;min-width: 70px;">
                        @Html.DisplayNameFor(model => model.PatientAddress)
                    </dt>

这让我觉得这可能是设置的层次结构，但我什至尝试了引导程序，但再次没有运气。

而且我不想将设置内联，因为这是一种不好的做法。

标签： htmlcssrazorcss-floatinline-styles

解决方案

CSS Specificity决定了 CSS 规则的应用顺序，所以尝试添加选择器，直到你得到想要的结果。

从链接的网站：

以下选择器类型列表按特定性增加：

  1. 类型选择器（例如h1）和伪元素（例如::before）。
  2. 类选择器（例如.example）、属性选择器（例如[type="radio"]）和伪类（例如:hover）。
  3. ID 选择器（例如，#example）。

其他规则：

  • 通用选择器 ( *)、组合器 ( +, >, ~, ' ', ||) 和否定伪类 ( :not()) 对特异性没有影响。（:not()但是，内部声明的选择器可以。）
  • 添加到元素（例如，style="font-weight: bold;"）的内联样式总是覆盖外部样式表中的任何样式，因此可以被认为具有最高的特异性。
  • !important规则：在样式声明中使用!important规则时，此声明将覆盖任何其他声明。

以下是您应该尝试的基于上面列出的类型的选择器示例：

/* Type selectors (your current method): */

dd
dt

/* Class selectors (either directly on elements, or on parent <table class="my-table"> */

dd.my-class
dt.my-class
/* or */
table.my-table dd
table.my-table dt

/* ID selectors (either directly on elements, or on parent <table id="my-table"> */

dd.my-dd
dt.my-dt
/* or */
table#my-table dd
table#my-table dt

就像您提到的那样，如果所有其他方法都失败了，您可以求助于使用完全覆盖所有 CSS 选择器的不良实践方法：内联样式或!important规则：

<style>
    dd {
        min-width: 120px !important;
        background: #dd0 !important;
    }

    dt {
        float: left;
        background: #cc0 !important;
        text-align: left !important;
    }
</style>

推荐阅读