0

こんにちはこれは簡単な修正かもしれません。だから私は<ul>それぞれ15以上のいくつかを持ってい<li>ます..

私のhtmlのいくつか。

<ul>
  <li><span>Government Gazette, No. 32320 of 12 June 2009. Forestry Sector Charter. s.l.:s.n.</span></li>
  <li><span>Government Gazette, No. 34267 of 10 May 2011. Charted Accountancy Sector Charter. s.l.:s.n.</li>
  <li><span>Government Gazette, No. 35400 of 1 June 2012. Property Sector Charter. s.l.:s.n.</li>
  <li><span>Government Gazette, No. 35423 of 06 June 2012. Information Technology and Telecommunication Sector Charter. s.l.:s.n.</span></li>
  <li><span>Government Gazette, No. 35754 of 5 October 2012. Revised Broad-Based Black Economic Empowerment Codes of Good Practice and B-BBEE Technical Assitance Guideline. s.l.:s.n.</span></li>
  <li><span>Government Gazette, No. 35907 of 23 November 2012. Broad-Based Black Economic Empowerment Amendment Bill. s.l.:s.n.</li>
  <li><span>Government Gazette, No. 35914 of 26 November 2012. Financial Services Sector Charter. s.l.:s.n.</span></li>
  <li><span>Government Gazette, No. 53 of 2003. Broad-Based Black Economic Empowerment Act. s.l.:s.n.</span></li>      
</ul>

私はそれを短くしなければなりませんでした。

私のcss：

 #bee_wwwh_box ul{
list-style-type:upper-roman;
margin-bottom: 10px;
margin-top: 15px;
margin-left: 30px;
margin-right: 450px;
 }
 #wwwh_box li{
font-size: 18px;
    color: #16a6b6;
letter-spacing: 1px;
margin-bottom: 10px;
margin-top: 15px;
margin-left: 30px;
margin-right: 30px;
 }
 #wwwh_box li span {
color: #41413e;
 }

ご覧のとおり、すべてのテキストをラップして<span>から、ローマのシンボルだけの色を変更して、アイテムのリストがある場所を人々がはっきりと確認できるようにしました。リストテキスト全体を変更するだけですか？私はそれの頭や尾を作ることができませんか？

私は何か間違ったことをしていますか？

4

4 に答える 4

2

<span>それは機能します、あなたはいくつかの終了タグを逃しています

HTML：

<div id="wwwh_box">
    <ul>
        <li><span>Government Gazette, No. 32320 of 12 June 2009. Forestry Sector Charter. s.l.:s.n.</span></li>
        <li><span>Government Gazette, No. 34267 of 10 May 2011. Charted Accountancy Sector Charter. s.l.:s.n.</span></li>
        <li><span>Government Gazette, No. 35400 of 1 June 2012. Property Sector Charter. s.l.:s.n.</span></li>
        <li><span>Government Gazette, No. 35423 of 06 June 2012. Information Technology and Telecommunication Sector Charter. s.l.:s.n.</span></li>
        <li><span>Government Gazette, No. 35754 of 5 October 2012. Revised Broad-Based Black Economic Empowerment Codes of Good Practice and B-BBEE Technical Assitance Guideline. s.l.:s.n.</span></li>
        <li><span>Government Gazette, No. 35907 of 23 November 2012. Broad-Based Black Economic Empowerment Amendment Bill. s.l.:s.n.</span></li>
        <li><span>Government Gazette, No. 35914 of 26 November 2012. Financial Services Sector Charter. s.l.:s.n.</span></li>
        <li><span>Government Gazette, No. 53 of 2003. Broad-Based Black Economic Empowerment Act. s.l.:s.n.</span></li>
    </ul>
</div>

CSS：

#bee_wwwh_box ul {

    margin-bottom: 10px;
    margin-top: 15px;
    margin-left: 30px;
    margin-right: 450px;
}
#wwwh_box li {
    list-style-type:upper-roman;
    font-size: 18px;
    color: #16a6b6;
    letter-spacing: 1px;
    margin-bottom: 10px;
    margin-top: 15px;
    margin-left: 30px;
    margin-right: 30px;
}
#wwwh_box li span {
    color: #41413e;
}

http://jsfiddle.net/xaKsU/

于 2013-01-30T16:07:20.710 に答える
1

</span>一部の要素にクロージャはありません。あなたはそれらを開いたが、閉じなかった。それは問題かもしれません...

于 2013-01-30T16:03:45.513 に答える
1

SPANタグの一部が閉じられていないためだと思いますか？それらの開始タグはありますが、一部の終了タグはありません。

于 2013-01-30T16:05:18.670 に答える
1

まず、<span>タグは閉じられていません。

これで問題が解決しない場合は、他の方法を試すことができます。1つのオプションは、リストの箇条書きの代わりに画像を使用することです（「list-item-image」を参照）。

li { list-style-image: url(images/yourimage.jpg); }

もう1つの可能性はli:beforeセレクターを使用することですが、これは古いバージョンのIEでは機能しません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style type="text/css">
    li {
      list-style: none;
    }

    li:before {
      /* For a round bullet */
      content:'\2022';
      /* For a square bullet */
      /*content:'\25A0';*/
      display: block;
      position: relative;
      max-width: 0px;
      max-height: 0px;
      left: -10px;
      top: -0px;
      color: green;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <ul>
    <li>foo</li>
    <li>bar</li>
  </ul>
</body>
</html>

両方の方法の詳細については、この質問を参照してください。

于 2013-01-30T16:07:41.383 に答える