CSS float и выравнивание текста работает только как inline - PullRequest
Новая
       26

CSS float и выравнивание текста работает только как inline

0 голосов
/ 24 апреля 2019

У меня есть приложение с ядром ASP .net 2.1.Я изменил это страница подробностей.Однако я застрял в элементах dl, dt и dd.

Текст в элементах dt, который содержит названия полей, примыкающих к правой стороне.и что бы я ни делал, я не мог изменить его, кроме того, что добавил и встроенный код стиля.Я поместил приведенный ниже код в раздел стиля файла: 

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

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

Этот код не вносит изменений с точки зрения выравнивания с плавающей точкой и текста, однако он действует для фона, как показано на рисунке ниже.it works for first two lines

Но когда я вставляю эти настройки дисплея как показано ниже, это прекрасно работает для тех строк, как на картинке выше. 

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

Это заставило менядумаю, что это иерархия настроек, но я попробовал даже самозагрузку и снова не повезло.

И я не хочу вставлять настройки в линию, так как это плохая практика.

1 Ответ

1 голос
/ 24 апреля 2019

Специфичность CSS определяет порядок, в котором применяются правила CSS, поэтому попробуйте добавлять селекторы с возрастающей специфичностью, пока не получите желаемый результат.

На связанном веб-сайте:

Следующий список типов селекторов увеличивается в зависимости от специфики:

  1. Селекторы типов (например, h1) и псевдоэлементы (например, ::before).
  2. Селекторы классов (например, .example), селекторы атрибутов (например, [type="radio"]) и псевдоклассы (например, :hover).
  3. Селекторы идентификаторов (например, #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>
...