Question

我有一个项目列表，我已经与其包含的<div>保持对齐。

＆＃13;

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

＆＃13;

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

＆＃13;

我想设置标题（＆＃34;我的列表＆＃34;），以便项目列表位于第一个项目的同一行（＆＃34; item1＆＃34;），但我不是想要更改项目的左对齐（我希望它看起来像这样）：

My list: item1
         item2
         item3
         etc.

不喜欢这样：

         My list: item1
         item2
         item3
         etc.

我目前正在使用:before来放置＆＃34;我的列表：，＆＃34;但它将它置于＆＃34;项目1＆＃34; （见上面的片段）。

有没有人知道如何将列表项的标题与第一项放在同一行而不将第一个列表项推到一边？

谢谢。

Answer 1

你考虑过这样的事吗？

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

Answer 2

您可以使用flex-box

以下是工作 Demo

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

你可以这样做：

#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 4

你去吧

#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 5

真的不确定为什么这是你想要的方式（而不是使用常规的ul/li），但这是你可以做的：

让content左浮动。
向每个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 6

您可以将before和span:first-child设置为display:inline-block然后在所有跨距上设置padding-left，但第一个让它们排成一行：

＆＃13;

#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;
  }

＆＃13;

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

＆＃13;

Answer 7

你应该做的是把你的标题放在你的HTML中。这样，您的list-container类仍然可以重复用于您可能需要相同样式的其他页面。

话虽如此。 :before和:after会预先附加/追加INSIDE指定的元素。因此，在您的第一个<ul>标记之前，您的标题不会放在<li>标记之前，而是放在其中。

将标题移至actaul HTML。 CSS用于样式化，在极少数情况下，您需要使用content属性添加内容。

CSS - 调整列表标题的格式

7 个答案: