список дл - я могу сделать «дт» над «дл», но и у каждого дт/дл группы инлайн

Таким образом у меня есть список дл что-то вроде этого:список дл - я могу сделать «дт» над «дл», но и у каждого дт/дл группы инлайн

.title { 
 
    display: inline-block; 
 
    padding-bottom: 20px; 
 
} 
 
dd { 
 
    -moz-margin-start: 0; 
 
    -webkit-margin-start: 0; 
 
    -o-margin-start: 0; 
 
    margin-start: 0; 
 
}

<dl class="details"> 
 
    
 
    <dt class="title">Name:</dt> 
 
    <dd class="title">Box</dd> 
 
     
 
    <dt class="member">Member Price</dt> 
 
    <dd class="member">$25</dd> 
 
    
 
    <dt class="retail">Retail Price</dt> 
 
    <dd class="retail">$30</dd> 
 
    
 
    </dl>

Я бы хотел, чтобы dt отображался над dd, но также для каждой dt/dd 'group', чтобы быть встроенным со следующим. Является ли это вообще возможно сделать это без позиции абсолютной или другого элемента упаковке.Размеров каждого дт/дд группы (которая будет разрывать структуру дла)

изображение прилагается показывает, что я пытаюсь достичь:

источник

2016-12-08 Niahc

Не похоже, что '

' - это правильный элемент для этого, просто семантически.вы открыты для другого HTML? – andi

Его HTML написан моим боссом, который является большим поклонником DL. Мне любопытно, можно ли даже технически использовать DL таким образом, или, если нет, я уверен, что было бы легко использовать что-то еще. – Niahc

из-семантических требований, я думаю, вы не будете менять разметку - так что я пытался возиться и вот некоторые хаков.

Hack 1:

flexbox Использование полей, и некоторые преобразования:

dd, 
 
dt { 
 
    margin: 0; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
dl { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    width: 100%; 
 
    margin: auto; 
 
    border: 1px solid red; 
 
} 
 
.title { 
 
    transform: translateX(-50%); 
 
} 
 
.title+.title { 
 
    margin-top: -1.1em; 
 
    transform: translateX(50%); 
 
} 
 
.member { 
 
    align-self: flex-start; 
 
} 
 
.retail { 
 
    align-self: flex-end; 
 
    margin-top: -2.2em; 
 
} 
 
.retail+.retail { 
 
    margin-top: initial; 
 
}

<dl class="details"> 
 
    <dt class="title">Name:</dt> 
 
    <dd class="title">Box</dd> 
 
    <dt class="member">Member Price</dt> 
 
    <dd class="member">$25</dd> 
 
    <dt class="retail">Retail Price</dt> 
 
    <dd class="retail">$30</dd> 
 
</dl>

Hack 2:

Другой вариант использования flexboxоберточной:

dd, 
 
dt { 
 
    margin: 0; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
dl { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    align-items: center; 
 
    width: 100%; 
 
    margin: auto; 
 
    border: 1px solid red; 
 
} 
 
.title { 
 
    flex-basis: 50%; 
 
    text-align:right; 
 
} 
 
.title+.title { 
 
    text-align: left; 
 
} 
 
.member { 
 
    text-align:left; 
 
    flex-basis: 100%; 
 
} 
 
.retail { 
 
    text-align:right; 
 
    margin-top: -3.3em; 
 
    flex-basis: 100%; 
 
} 
 
.retail+.retail { 
 
    margin-top: -1.2em; 
 
}

<dl class="details"> 
 
    <dt class="title">Name:</dt> 
 
    <dd class="title">Box</dd> 
 
    <dt class="member">Member Price</dt> 
 
    <dd class="member">$25</dd> 
 
    <dt class="retail">Retail Price</dt> 
 
    <dd class="retail">$30</dd> 
 
</dl>

А вот что-то related that I did sometime back.

Удачи вам!

источник

2016-12-08 17:40:59 kukkuz

спасибо, это очень умное использование flexbox и отлично поработало с некоторыми настройками! – Niahc

Вот способ его настройки. Он подтягивает первый элемент .retail, используя верхний край, равный 2 строкам (я предполагаю, что ваш контент короток). И затем он перемещает .member влево и .retail направо. (Вы можете использовать процентные ширины вместо фиксированной, если это работает лучше на вашей странице.)

.details {text-align:center; line-height:1.5em;} 
 
dt, dd {display:block; margin:0; padding:0;} 
 
.title {display:inline-block;} 
 
.member + .retail {margin-top:-3em;} 
 
.member {margin-left:-200px;} 
 
.retail {margin-left:200px;}

<dl class="details"> 
 
\t <dt class="title">Name:</dt> 
 
\t <dd class="title">Box</dd> 
 
\t <dt class="member">Member Price</dt> 
 
\t <dd class="member">$25</dd> 
 
\t <dt class="retail">Retail Price</dt> 
 
\t <dd class="retail">$30</dd> 
 
</dl>

источник

2016-12-08 18:29:15 andi

В итоге я использовал это в основном потому, что это просто самый простой способ и дает легкий контроль над тем, насколько далеко к краю каждая группа. Благодаря! – Niahc

Другой flex подход с order, wrap, width и margin:

(Добавлено несколько цветов поэтому вы видите, какие цепочки таргетинга)

dl, dt, dd { 
 
    margin:0; 
 
    padding:0.25em 1em; 
 
    box-sizing:border-box; 
 
} 
 
dl { 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    width:400px; 
 
    margin:auto; 
 
    background:gray; 
 
} 
 
dt, dd { 
 
    width:50%; 
 
} 
 
.title { 
 
    padding:0.5em 0.1em 1.25em; 
 
} 
 
dl.details > :nth-child(odd) { 
 
    order:0; 
 
    /* see me */color:yellow; 
 
} 
 
dl.details > .member ~ :nth-child(even) { 
 
    order:1; 
 
    /* see me */ background:tomato; 
 
} 
 
dl.details > :nth-child(3n+1), 
 
dl.details > :nth-child(3){ 
 
    text-align:right; 
 
    /* see me */ box-shadow:inset 0 0 0 2px turquoise; 
 
} 
 
.retail +.retail, 
 
.member + .member{ 
 
    width:35%;/* might need tuning up to 47% */ 
 
    margin:auto; 
 
    /*see me */ color:white; 
 
}

<dl class="details"> 
 
    
 
    <dt class="title">Name:</dt> 
 
    <dd class="title">Box</dd> 
 
     
 
    <dt class="member">Member Price</dt> 
 
    <dd class="member">$25</dd> 
 
    
 
    <dt class="retail">Retail Price</dt> 
 
    <dd class="retail">$30</dd> 
 
    
 
    </dl>

источник

2016-12-08 19:58:06

список дл - я могу сделать «дт» над «дл», но и у каждого дт/дл группы инлайн

ответ

Смежные вопросы