0

私は 2 つの UL を持っています。

ここに画像の説明を入力

上部の緑色の領域に表示されるテキストを追加するにはどうすればよいですか?

テキストは LI にある必要はありません。

私が試みるたびに、テキストがボックスの外側に表示されます。2 つの UL を div とスパン (現在は以下のスパン) の両方にラップして、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

<li>を a の子として持つことは HTML でのみ有効な<ul>ので<ol>、別の要素でテキストをラップすることはできません。の開始タグの直後にテキストを追加するだけ<ul>で、緑色の領域に表示されますが、それがまさにあなたが求めているものかどうかはわかりません. <ul>ソースを見つけようとしますが、タグの直後にテキストノードを持つことが有効かどうかもわかりません。

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

更新: バリデータによると、開始タグの前にテキストを追加すること<ul>も無効です:

行 38、列 10: このコンテキストでは、要素 ul にテキストを使用できません。

あなたの最良の選択肢は、要素をボックス内に表示するように絶対に配置することだと思います。

于 2013-04-14T23:34:14.920 に答える
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 に答える