Pytanie CSS:
z odstępem / marginesem między parami dt / dd


Mam następujący html:

<dl>
        <dt>Item 1</dt>
        <dd>
            <ul>
                <li>Value 1</li>
            </ul>
        </dd>
        <dt>Item 2</dt>
        <dd>
            <!-- this item is missing a value -->
        </dd>
        <dt>Item 3</dt>
        <dd>
            <ul>
                <li>Value 1</li>
                <li>Value 2</li>
                <li>Value 3</li>
            </ul>
        </dd>
    </dl>

Chciałbym to ułożyć jak (zamiast normalnego dl, który umieszcza termin i definicje pod sobą):

Item 1    Value 1
Item 2    
Item 3    Value 1
          Value 2
          Value 3

Co nie jest problemem. Problem polega na tym, że chciałbym dodać margines między każdą parą terminów / definicji. Problem polega na tym, że definicje nie mają tej samej wysokości (wynoszą od 0 do 5 elementów listy), więc nie mogę zastosować tego samego marginesu na tagach dd.


14
2018-05-22 08:09


pochodzenie




Odpowiedzi:


Jak to się dzieje?

dt, dd { display: block; float: left; margin-top: 20px; }
dt { clear: both; }

19
2018-05-22 08:19



to najczystsze rozwiązanie w moich oczach. - Gidon
Nie zapomnij o dl {overflow: hidden; } ... :) - bang


Czy masz na myśli coś takiego:

Item 1    Value 1

Item 2    

Item 3    Value 1
          Value 2
          Value 3

Ponieważ nie widzę powodu, dla którego nie można zastosować marginesu na elementach dd. Zrobiłem szybki eksperyment, używając następującego kodu CSS:

ul { 
  margin: -1.2em 0 0 100px; 
  padding: 0; 
}

dd { 
  margin-bottom: 10px;
}

Który wydaje się mieć efekt, którego potrzebujesz.


4
2018-05-22 08:27



Dzięki, to też działa. - Gidon


Myślę, że właściwe użycie dl, dt i dd nie używa ul  lijest w a dd, ale zamiast tego użyj innego dd. Wydaje mi się, że używasz listy w elemencie, który sam jest do umieszczenia na liście.

<dl>
    <dt>Item 1</dt>
    <dd>Value 1</dd>
    <dt>Item 2</dt>
    <dd>
       &nbsp;
    </dd>
    <dt>Item 3</dt>
    <dd>Value 1</dd>
    <dd>Value 2</dd>
    <dd>Value 3</dd>
</dl>

Dla CSS możesz użyć tego:

DL {
PADDING: 0; MARGIN: 0; }
DT {
POSITION: relative; PADDING: 0; MARGIN: 0; TOP: 1.2em; LEFT: 0px; }
DD {
PADDING: 0; MARGIN: 0 0 0 5em; }

1
2017-11-18 09:12



Miało to służyć jako przykład. Ale nawet nadal użycie 3 DD jest semantycznie różne od DD z UL. 3 DD oznaczają, że Termin ma 3 Definicje. 1 DD z UL oznacza, że ​​termin ma jedną definicję, która powstaje z listy. - Gidon
@Gidon Te dni Lista definicji oficjalnie została "ponownie uporządkowana" jako lista opisów, więc całkowicie semantycznie jest mieć 3 DD dla jednego DT. Zdaję sobie sprawę, że być może nie było tak, gdy zadawano to pytanie. - Louise Eggleton


Czy twój "element 2" dd jest naprawdę pusty, czy też ma &nbsp; w tym? Jeśli jest pusty, trudno będzie uzyskać poprawne ustawienie dt / dd, ponieważ inne dd będą miały wysokość 20 pikseli (na przykład), a puste dd będą miały wysokość 0.

Bądź ostrożny z marginesem-górnym, będziesz musiał zastosować go zarówno do dt jak i dd.

Wolę używać dopełnienia na spodzie dd. Daje bardziej spójne wyniki.

dt {
    float: left;
    clear: left;
    width: 8em;
    }
 dd {
    margin: 0 0 0 9em;
     padding: 0 0 2.5em 0;
    }

0
2018-05-22 12:07