Div с разделителем внутри?
Я новичок в веб-дизайне и хотел бы воспроизвести классификацию элементов, как на следующем снимке:
Как видите, есть симпатичный знак "|" разделитель между заголовком и описанием.
Из источника страницы я вижу, что он использует div с настраиваемыми атрибутами класса. Я не смог найти учебник, который показывает, как воспроизвести подобное. Может ли кто-нибудь предложить самый простой способ создать аналогичную вещь с помощью div, таблицы или чего-то еще?
Ответы 1
Вы можете использовать границу раздела с помощью css border-style. Вы можете настроить ширину вашей строки с помощью border-width.
вы можете указать в следующем порядке: сверху, справа, снизу, слева.
Проверьте это на MDN
.rightBorder {
border-style: none solid none none;
border-width: 1px;
height: 50px;
width: 50px;
color: blue;
}<div class = "rightBorder"> JBoss </div>Спасибо! Я разработал таблицу, используя предоставленный вами класс. Похоже, я искал: `<table> <tr> List of Elements <td style = " border-style: none solid none none; border-width: 1px; height: 50px; width: 150px; color: blue ; "> Элемент 1 </td> <td> Элемент 2 </td> </tr> </table>`
Отличные новости! Удачи в кодировании. @carla
почему бы не использовать границу