UL's - 如何在頂部添加標題？

enter image description here

我如何添加文本出現在頂部的綠色區域。

該文本不需要在LI中。

我所做的每一次嘗試都使文本顯示在框外。我已經在UL之前將兩個UL包裝在一個div和一個跨度（目前跨度如下），但是都沒有幫助，文本仍然在外面。

<html> 
    <head> 
    <style> 
    #list_to_process, #categories { 
     color: blue; background-color: green; border: solid; 
     border-width: 4px; padding-top:40px 
    } 
    .panel { color: red; background-color: yellow; 
      border: solid; border-width: 4px } 
    ul { padding: 10px; margin: 50px; float:left; list-style:none; } 
    li { color: yellow; padding: 25px 80px; cursor: move; } 
    li:nth-child(even) { background-color: #000 } 
    li:nth-child(odd) { background-color: #666 } 
    </style> 
    </head> 
    <body> 
    <span class="a_list"> 
     header1 
     <ul id="list_to_process"> 
     <li class="to_process" id="left1">1</li> 
     <li class="to_process" id="left2">2</li> 
     <li class="to_process" id="left3">3</li> 
     <li class="to_process" id="left4">4</li> 
     <li class="to_process" id="left5">5</li> 
     </ul> 
    </span> 
    <span class="a_list"> 
     <ul id="categories"> 
     <li id="righta">a</li> 
     <li id="rightb">b</li> 
     <li id="rightc">c</li> 
     <li id="rightd">d</li> 
     <li id="righte">e</li> 
     </ul> 
    </span> 
    </body> 

</html>

來源

2013-04-14 Michael Durrant

只需使用定位的http：/ /jsfiddle.net/gThjy/6/ – Musa

該標記無效：跨度只能包含內聯元素 – cimmanon

那麼它只能在HTML有效有一個<li>作爲一個<ul>或<ol>在不同的元素，以便包裹任何文本孩子是不可能的。您可以直接在<ul>的開始標記之後直接添加文本，並且它會顯示在綠色區域中，儘管我不確定那正是您要的內容。我也不確定它是否有效在<ul>標籤後面有一個文本節點，儘管我會嘗試查找源代碼。

http://jsfiddle.net/PerfectDark/gThjy/5/

更新：起始<ul>標記之前添加文本也無效根據驗證：

38號線，10列：文本不允許在元素UL在這方面。

我認爲你最好的選擇是絕對定位一個元素，讓它出現在盒子裏面。

來源

2013-04-14 23:34:14

根據您當前的標記這除了CSS將工作和是語義：

#list_to_process:before, #categories:before{ 
content:"Read this: "; 
}

來源

2013-04-14 23:37:16 BingeBoy

演示是一個非常好的方式來表明您的答案有效：http://jsfiddle.net/gThjy/7/ – cimmanon

也許這可以幫助：

<ul id="list_to_process"> 
     Header 1 
    <li class="to_process" id="left1">1</li> 
    <li class="to_process" id="left2">2</li> 
    <li class="to_process" id="left3">3</li> 
    <li class="to_process" id="left4">4</li> 
    <li class="to_process" id="left5">5</li> 
    </ul> 
    <ul id="categories"> 
     Header 2 
    <li id="righta">a</li> 
    <li id="rightb">b</li> 
    <li id="rightc">c</li> 
    <li id="rightd">d</li> 
    <li id="righte">e</li> 
    </ul>

來源

2013-04-14 23:40:32

UL's - 如何在頂部添加標題？

回答

相關問題