Как добавить вертикальные линии между несколькими элементами div

Question

Как добавить вертикальные линии между несколькими элементами div

0

У меня есть несколько элементов div, и я хочу добавить вертикальную линию разделения между этими div. Ниже приведен html:

     <div class="clone_container " >
     <a class="button-link">Clone</a>
 </div>
<div class="clone_container " >
     <a class="button-link">Delete</a>
 </div>
<div class="clone_container " >
     <a class="button-link">Abort</a>
 </div>
<div class="clone_container " >
     <a class="button-link">Pause</a>
 </div>

Результат, который я ищу, выглядит примерно так: Clone | Удалить | Отменить | Пауза. Как я могу это достичь?

user2942566 27 апр. 2014, в 02:42

Источник

Теги:

html

css

3 ответа

1

Просто вы можете попробовать что-то вроде этого (пример):

HTML:

<div class="clone_container " >
    <a href='' class="button-link">Clone</a>
</div>
|
<div class="clone_container " >
    <a href='' class="button-link">Delete</a>
</div>
|
<div class="clone_container " >
    <a href='' class="button-link">Abort</a>
</div>

CSS:

.clone_container{
    display:inline-block;
}

Вывод:

Clone  | Delete  | Abort  | Pause

Также вы можете поставить | внутри другого элемента (span) и применить к нему некоторые стили (пример):

CSS:

span.separator{
    padding:0 2px;
    color:gray;
}

HTML:

<div class="clone_container " >
    <a href='' class="button-link">Clone</a>
</div>
<span class='separator'>|</span>

The Alpha 26 апр. 2014, в 21:34

0

Э-э...

Clone | Delete | Abort | Pause

Готово.

Хорошо, вот HTML:

<div class="clone_container">
    <a class="button-link">Clone</a>
</div>
|
<div class="clone_container">
    <a class="button-link">Delete</a>
</div>
|
<div class="clone_container">
    <a class="button-link">Abort</a>
</div>
|
<div class="clone_container">
    <a class="button-link">Pause</a>
</div>

Если вы хотите, чтобы любитель выглядел один, вы можете сделать это с помощью CSS:

.clone_container:after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 12px;
    background: #aaa;
}

bjb568 26 апр. 2014, в 22:42

Ещё вопросы

scott.korin · Accepted Answer · 2014-04-26T22-50-00.000Z

Вы можете добавить границу с правой стороны каждого элемента (кроме последнего) с помощью CSS:

.clone_container {
    display: inline-block;
    border-right: 1px solid #aaa;
    padding-right: 4px;
}

.clone_container:last-child {
    border-right: none;
}

http://jsfiddle.net/xE68V/