0

我有两个UL：

在此处输入图像描述

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

文本不必在 LI 中。

我所做的每一次尝试都会使文本出现在框外。我已经将两个 UL 包装在一个 div 和一个 span（目前是一个 span 如下）中，在 UL 之前带有文本，但两者都没有帮助，文本仍然在外面。

jsfiddle：http: //jsfiddle.net/gThjy/

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

3 回答 3

1

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

#list_to_process:before, #categories:before{ 
content:"Read this: ";
}
于 2013-04-14T23:37:16.973 回答
0

也许这会有所帮助：

  <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-14T23:40:32.367 回答
0

好吧，它在 HTML 中唯一有效的是将<li>a 作为 a 的子级，<ul>或者<ol>将任何文本包装在不同的元素中是不可能的。您可以直接在起始标签之后添加文本<ul>，它会显示在绿色区域中，但我不确定这正是您所追求的。我也不确定在<ul>标签之后直接有一个文本节点是否有效，尽管我会尝试找到一个来源。

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

更新：根据验证器，在起始<ul>标签之前添加文本也是无效的：

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

我认为你最好的选择是绝对定位一个元素，让它出现在盒子里。

于 2013-04-14T23:34:14.920 回答