Как сделать в строчку через двоеточие Характеристики в CSS?

Question

[Михаил Шипилов]

Comments

[Тимофей]

Код в студию!

Answer 1

[Егор Федосенко]

Дайте угадаю. У вас примерно вот так выглядит это?

<div class="content">
    <div class="tech">Бренд</div>
    <div class="tech">Guardo</div>
    <div class="tech">Тип индикации</div>
    <div class="tech">Стрелочная</div>
    <div class="tech">Тип механизма</div>
    <div class="tech">Кварцевый</div>
</div>

Если я прав, вам должен понравиться мой костыль. https://jsfiddle.net/k6x39q68/

Answer 2

[Bamburillo]

К примеру так

<ul class="options">
    <li>Раз</li>
    <li>Два</li>
    <li>Три</li>
    <li>Четыре</li>
    <li>Пять</li>
</ul>

.options 
{
    list-style: none;
}
.options li 
{
    list-style: none;
    float: left;
    padding-left 5px;
}
.options li:after {
    content: ";"
}

Вот как это работает линк
UPDATE:
После увиденного кода вот новый линк с решением линк

<div class="single-item-desc">
<ul>
    <li><span>Бренд</span>
        <ul>
            <li>Guado</li>
        </ul>   
    </li>
    
    <li><span>Бренд</span>
        <ul>
            <li>Guado</li>
        </ul>   
    </li>
    <li><span>Бренд</span>
        <ul>
            <li>Guado</li>
        </ul>   
    </li>
    <li><span>Бренд</span>
        <ul>
            <li>Guado</li>
        </ul>   
    </li>
    <li><span>Бренд</span>
        <ul>
            <li>Guado</li>
        </ul>   
    </li>
</ul>
</div>

.single-item-desc ul 
{
    list-style: none;
}
.single-item-desc ul > li span 
{
    list-style: none;
    float: left;
    padding-left 5px;
}
.single-item-desc ul li span:after {
    content: ": "
}

Comments

[Михаил Шипилов]

А "раз""два"..... это, допустим "Бренд"? или "Бренд: Guardo"?

[Bamburillo]

Михаил Шипилов: В моем коде это БрендGuardo
Если у вас другой код, то напишите этот кусок HTML можно будет быстрее подсказать.

[Bamburillo]

Bamburillo: Вообще стало невидно, парсер съел код :) Бренд -> Раз, Guardo -> два. Но все, равно для Вас вероятно этот вариант не подходит. Дайте ваш HTML код

[Михаил Шипилов]

Скинул фото

[Bamburillo]

Написал вариант решения. И да, Михаил, если решили свой вопрос надо нажать на соответствующем ответе кнопку "Отметить решением", что-бы другие пользователи видели, что решение вашего вопроса есть.

Answer 3

[Михаил Шипилов]

вот код

Comments

[Bamburillo]

Попробуйте вот так https://jsfiddle.net/q2ac12cv/1/

[Роман]

Может я и не в тему, но зачем создавать в элементе списка новый список, который содержит в себе всего-навсего 1 элемент?