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 - 調整列表標題的格式

回答

相關問題