CSS - скорректируйте форматирование заголовка списка

Question

У меня есть список предметов, которые я оставил выровненными относительно их содержащих <div>.

#list-container:before { 
 
    content: 'My list:'; 
 
} 
 
#list-container span { 
 
    display: block; 
 
}

<div id="list-container"> 
 
    <span>item1</span> 
 
    <span>item2</span> 
 
    <span>item3</span> 
 
    <span>item4</span> 
 
    <span>item5</span> 
 
    <span>item6</span> 
 
</div>

Я хочу, чтобы установить заголовок («Мой список») для списка элементов, чтобы быть на той же строке первого пункта («item1»), но я не чтобы изменить выравнивание по левому краю пунктов (Я хочу, чтобы это выглядело как это):

My list: item1 
     item2 
     item3 
     etc. 

не так:

  My list: item1 
     item2 
     item3 
     etc. 

В настоящее время я использую :before, чтобы разместить «Мой список :,», но он помещает его выше «item 1» (см. Выше фрагмент).

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

спасибо.

Answer 1

На самом деле не знаю, почему это так, как вы хотите, чтобы это (а не с помощью регулярного ul/li), но вот то, что вы можете сделать :

1. Внесите content left-floa т.
2. Добавить левую обивку на каждый элемент span.

#list-container:before { 
 
    content: "My list:"; 
 
    float: left 
 
} 
 
#list-container span { 
 
    display: block; 
 
    padding-left: 54px; 
 
}

<div id="list-container"> 
 
    <span>item1</span> 
 
    <span>item2</span> 
 
    <span>item3</span> 
 
    <span>item4</span> 
 
    <span>item5</span> 
 
    <span>item6</span> 
 
</div>

Answer 2

Вы считали что-то вроде этого?

#list-container:before { 
    content: 'My list:'; 
} 
#list-container span { 
    display: block; 
    margin-left: 30px; 
} 
#list_container span:first_child { 
    margin-left: 0px; 
} 

Answer 3

Вы можете использовать flex-box

Здесь рабочий Demo

#list-container{ 
 
\t display: flex; 
 
} 
 
.items{ 
 
\t display: flex; 
 
\t flex-direction: column; 
 
}

<div id="list-container"> 
 
\t <span>My list:</span> 
 
\t <div class="items"> 
 
\t \t <span>item1</span> 
 
\t \t <span>item2</span> 
 
\t \t <span>item3</span> 
 
\t \t <span>item4</span> 
 
\t \t <span>item5</span> 
 
\t \t <span>item6</span> 
 
\t </div> 
 
</div>

Answer 4

Вы можете добиться этого так:

#list-title,#list-container { 
 
    float: left; 
 
} 
 
#list-container{ 
 
    margin-left: 10px; 
 
} 
 

 
#list-container span{ 
 
display:block; 
 
}

<div id="list-title"> My list :</div> 
 
<div id="list-container"> 
 
    <span>item1</span> 
 
    <span>item2</span> 
 
    <span>item3</span> 
 
    <span>item4</span> 
 
    <span>item5</span> 
 
    <span>item6</span> 
 
</div>

Answer 5

Держи

#list-container{ 
 
    margin:0; 
 
    margin-right:5px; 
 
    float:left; 
 
} 
 
#list-container span { 
 
    display: block; 
 
}

<div id="list-container"> 
 
    <span>My List:</span> 
 
</div> 
 
<div id="list-container"> 
 
    <span>item1</span> 
 
    <span>item2</span> 
 
    <span>item3</span> 
 
    <span>item4</span> 
 
    <span>item5</span> 
 
    <span>item6</span> 
 
</div>

Answer 6

Вы можете сделать это, установив before и span:first-child к display:inline-block, а затем установить padding-left на всех пролетах, но первый, чтобы сделать их линию:

#list-container:before { 
 
    content: 'My list:'; 
 
    display:inline-block; 
 
    width:56px; 
 
} 
 
#list-container span { 
 
    display: block; 
 
    padding-left:60px; 
 
} 
 
    #list-container span:first-child { 
 
    display:inline-block; 
 
    padding-left:0; 
 
    }

<div id="list-container"> 
 
    <span>item1</span> 
 
    <span>item2</span> 
 
    <span>item3</span> 
 
    <span>item4</span> 
 
    <span>item5</span> 
 
    <span>item6</span> 
 
</div>

Answer 7

Что вам нужно сделать, это поместить свой заголовок в свой html. Таким образом, ваш класс list-container остается пригодным для повторного использования для других страниц, где вам может потребоваться один и тот же стиль.

Это считая. :before и :after предупредят/добавят содержимое, предоставленное INSIDE, для элемента, для которого они указаны. Таким образом, ваш заголовок не помещается перед вашим тегом <ul>, а скорее внутри него, перед вашим первым <li>.

Просто переместите свой заголовок в actaul HTML. CSS предназначен для стилизации, и в редких случаях вам необходимо добавить контент, используя свойство content.