CSS - 调整列表标题的格式

-1

我有一个项目列表，其中包含<div>。CSS - 调整列表标题的格式

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

我想设置的标题（“我的目录”）的项目清单是在同一行中的第一项（“物品1”），但我不要改变项目的左对齐（我希望它看起来好像是这样）：

My list: item1 
     item2 
     item3 
     etc.

不这样的：

  My list: item1 
     item2 
     item3 
     etc.

我当前正在使用:before来放置“我的列表：”，但它将它放在“项目1”的上方（请参阅上面的代码段）。

有没有人知道一种方法来获取列表项的标题与第一个项目在同一行上，而不是将第一个列表项目推到一边？

谢谢。

来源

2016-08-16 4lackof

你检查了答案吗？请投票/接受其中一个，或更新您没有得到您想要的答案。 – Dekel

真的不知道这是为什么你要这样（而不是使用常规ul/li），但这里的方法是你可以做什么：

制作content left-floa吨。
向每个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>

来源

2016-08-16 18:15:52 Dekel

你有没有考虑过这样的事情？

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

来源

2016-08-16 18:13:08 Okomikeruko

您可以使用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>

来源

2016-08-16 18:13:51

你可以做到这一点像：

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

来源

2016-08-16 18:15:06

在这里你去

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

来源

2016-08-16 18:15:14 jonju

你可以通过设置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>

来源

2016-08-16 18:16:04 APAD1

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

这就是说。 :before和:after将预先附加/附加在指定它们的元素内提供的内容。因此，您的标题不会放在<ul>标签之前，而是位于第一个<li>之前。

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

来源

2016-08-16 18:17:43 coderodour

CSS - 调整列表标题的格式

回答

相关问题