Question

我有两个UL：

enter image description here

如何添加文字以显示在顶部绿色区域。

文本不需要在LI中。

我所做的每次尝试都会在文字框外显示文字。我已经将两个UL包含在div和span中（目前的跨度如下），在UL之前使用文本，但是没有帮助，文本仍在外面。

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

Answer 1

使用您当前的标记，这对CSS的添加将起作用并且是语义的：

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

Answer 2

它仅在HTML中有效<li>作为<ul>或<ol>的子项，因此无法将任何文本包装在其他元素中。您可以直接在<ul>的起始标记之后添加文本，它将显示在绿色区域中，但我不确定这正是您所追求的。我也不确定在<ul>标记后直接使用文本节点是否有效，但我会尝试查找源。

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

更新：根据验证程序，在起始<ul>标记之前添加文本也无效：

第38行，第10列：在此上下文中元素ul中不允许使用文本。

我认为你最好的选择是绝对定位一个元素，使其显示在框内。

Answer 3

也许这可能会有所帮助：

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

UL - 如何在顶部添加标题？

3 个答案: