-1

http://www.richmindonline.com/doggy/index.htmlにある Web ページに取り組んでいます。ページの中央付近にある 1 つのリストのスタイリングに問題があります。{list-style-type:disc;}スタイルとして追加したいのですが、うまくいきません。スタイルを適用したいリストは「ようこそ」段落の下にあり、具体的には「ニュース」というラベルの付いた 4 つのボックスの 1 番目の下にあります。リストの最初の項目は「Link to News Story」です。Firefox を使用して要素を見つけようとしましたが、非常に具体的であっても、スタイルは変わりません。

どんな助けでも大歓迎です。HTML は次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Go-to Guide For Pets</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script src="maxheight.js" type="text/javascript"></script>
</head>

<body  id="page1" onload="new ElementMaxHeight(); ">
<div class="main">
<div id="header">
    <ul class="ul1">
        <li><a href="index.html">Welcome</a></li>
        <li><a href="news.html">News</a></li>
        <li><a href="information.html">Information</a></li>
        <li><a href="products.html">Products</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="funhouse.html">Funhouse</a></li>
    </ul>
    <div class="block">
        <div class="indent-block">
            <img alt="" src="images/title1.gif" /><br />
            <p><strong>Special program for your dog</strong></p>
            <ul class="ul">
                <li><a href="#">Nulla dui. Fusce feugiat mal</a></li>
                <li><a href="#">Esuada odio. scing elitauris </a></li>
                <li class="last"><a href="#">Fermentum dictum</a></li>
            </ul>
        </div>
        <a href="#"><img alt="" src="images/button.gif" class="button" /></a>
  </div>
    <div class="indent">
        <a href="index.html"><img alt="" src="images/logo.gif" class="logo" /></a><br />
        <a href="index.html"><img alt="" src="images/img.jpg" /></a><br />
    </div>
</div>
<div id="content">      
    <div class="indent-main">
        <div class="indent">
            <div class="container">
                <div class="col-1">
                    <div class="indent-col1">
                        <h1 class="title">Welcome</h1>
                        <p class="p1">Welcome Pet Lovers! &nbsp;Here you'll find just what you're looking for - with a big extra bonus: FUN! &nbsp;Sure, you could buy that catnip or dog toy anywhere else, but here at the Go-To Guide, we are SERIOUSLY committed to making you SMILE. &nbsp;Maybe even LAUGH!</p>
                      <div class="box">
                            <div class="border-top">
                                <div class="border-bottom">
                                    <div class="corner-top-right">
                                        <div class="corner-top-left">
                                            <div class="corner-bottom-left">
                                                <div class="corner-bottom-right"> 
                                                    <div class="indent-box">
                                                        <div class="container">
                                                          <div class="col-3">
                                                                <img alt="" src="images/1page_img1.jpg" class="img-indent" /><br />
                                                              <a href="#" class="link2"><strong>News</strong></a> <br />
                                                                <ul class="boxlist">
                                                                   <li>Link to News Story</li>
                                                                   <li>Link to News Story 2</li>
                                                                   <li>Link to News Story 3</li>
                                                                </ul>
                                                               </div>
                                                            <div class="col-3">
                                                                <img alt="" src="images/1page_img2.jpg" class="img-indent" /><br />
                                                              <a href="#" class="link2"><strong>Information</strong> <br />
                                                               &nbsp; &nbsp; &nbsp; &nbsp;mau <span>rillus</span> </a>
                                                            </div>
                                                            <div class="col-3">
                                                                <img alt="" src="images/1page_img3.jpg" class="img-indent" /><br />
                                                              <a href="#" class="link2"><strong>Products</strong> <br />
                                                               &nbsp; &nbsp; &nbsp; &nbsp;cumsoci <span>inatot</span> </a>
                                                            </div>
                                                            <div class="col-4">
                                                                <img alt="" src="images/1page_img4.jpg" class="img-indent" /><br />
                                                              <a href="#" class="link2"><strong>Services</strong> <br />
                                                               &nbsp; &nbsp; &nbsp; &nbsp;us etgnis <span>sriea</span>  </a>
                                                          </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <img alt="" src="images/1page_title2.gif" class="title1" /><br />
                        <p><strong>04/18/2009 - 14:53</strong></p>
                        <p class="p"><strong>Lum moleie lacneanrit</strong> lacneanrit maurillus Cum sociis natotibus etgnis disriea jesertas leraen<br />
                        monluslertas lrurtas feugiat maleadabi nunc odgravida atcursus nec, luctus a, locenas tristique orci ac sem. Duis ultricies pharetra magna onec accumsan malesuada nec sit amet er orem </p>
                        <a href="#" class="link">more info</a> &nbsp; &nbsp; &nbsp;<a href="#" class="link">view comments</a>
                    </div>
                </div>
                <div class="col-2">
                    <div class="box1">
                        <div class="border-top">
                            <div class="border-bottom">
                                <div class="border-right">
                                    <div class="border-left">
                                        <div class="corner-top-right">
                                            <div class="corner-top-left">
                                                <div class="corner-bottom-left">
                                                    <div class="corner-bottom-right"> 
                                                        <img alt="" src="images/1page_title7.gif" class="title2" /><br />
                                                        <div class="indent-box">
                                                            <ul class="ul">
                                                                <li><a href="#">Acneanrit</a> maurillus cum sociis </li>
                                                                <li><a href="#">Cum sociis</a> natotibus etgnis </li>
                                                                <li><a href="#">Natotibus</a> etgnis disriea </li>
                                                                <li><a href="#">Egnis</a> disriea jesertas leraen </li>
                                                                <li><a href="#">Jesertas</a> leraen monluslertas </li>
                                                                <li><a href="#">Leraen monluslertas</a> lrurtas </li>
                                                                <li><a href="#">Monluslertas</a> lrurtas feugiat </li>
                                                                <li><a href="#">Lrurtas</a> feugiat male</li>
                                                                <li class="last"><a href="#">Feugiat</a> malesuadabi unc </li>
                                                            </ul>
                                                        </div>                                     
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                  <form action="" id="form1">
                    <div class="indent-1">
                        <img alt="" src="images/1page_title8.gif" /><br />
                        <p>Enter your email</p>
                         <p><input type="text" class="input" /><a href="#" class="ok" onclick="document.getElementById('form1').submit()">ok</a></p>
                        <a href="#" class="link3"> Unsubscribe</a>
                    </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="box3">
            <div class="border-top3">
                <div class="corner-top-right3">
                    <div class="corner-top-left3">
                        <div class="indent-box3">
                            <img alt="" src="images/1page_title3.gif" /><br />
                            <div class="container">
                                <div class="col-5 maxheight">
                                    <div class="box2 maxheight">
                                        <div class="border-top maxheight">
                                            <div class="border-bottom maxheight">
                                                <div class="border-right maxheight">
                                                    <div class="border-left maxheight">
                                                        <div class="corner-top-right maxheight">
                                                            <div class="corner-top-left maxheight">
                                                                <div class="corner-bottom-left maxheight">
                                                                    <div class="corner-bottom-right maxheight"> 
                                                                        <div class="indent-box">
                                                                            <img alt="" src="images/1page_title4.gif" class="title-1" /><br />
                                                                            <h4>Sed laoreet aliquam lda let aliquam. </h4> 
                                                                            <p>Mauris fermentum dictum gna. Sed laoreet aliquam leo. Ut tellus dolorap
                                                                            ibus eget element vel, cursus </p>
                                                                            <p>Mauris fermentum dictum gnased </p>
                                                                            <a href="#" class="link3">more info</a>            
                                                                        </div>                                     
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-5 maxheight">
                                    <div class="box2 maxheight">
                                        <div class="border-top maxheight">
                                            <div class="border-bottom maxheight">
                                                <div class="border-right maxheight">
                                                    <div class="border-left maxheight">
                                                        <div class="corner-top-right maxheight">
                                                            <div class="corner-top-left maxheight">
                                                                <div class="corner-bottom-left maxheight">
                                                                    <div class="corner-bottom-right maxheight"> 
                                                                      <div class="indent-box">
                                                                          <img alt="" src="images/1page_title5.gif" class="title-1" /><br />
                                                                          <ul class="p">
                                                                            <li><a href="#">Vivamus eget nibhacilisiaenea</a></li>
                                                                                <li><a href="#">Nec erosestibulum ante ipsum</a></li>
                                                                                <li><a href="#">Faucibus orci luctus et ultrices </a></li>
                                                                                <li><a href="#">Posuere cubilia curae</a></li>
                                                                            <li><a href="#">Suspendisse sollicitudin velit sed </a></li>
                                                                            </ul>
                                                                            <a href="#" class="link3">more info</a>            
                                                                        </div>                                     
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                              <div class="col-5 maxheight">
                                    <div class="box2 maxheight">
                                        <div class="border-top maxheight">
                                            <div class="border-bottom maxheight">
                                                <div class="border-right maxheight">
                                                    <div class="border-left maxheight">
                                                        <div class="corner-top-right maxheight">
                                                            <div class="corner-top-left maxheight">
                                                                <div class="corner-bottom-left maxheight">
                                                                    <div class="corner-bottom-right maxheight"> 
                                                                        <div class="indent-box">
                                                                          <img alt="" src="images/1page_title6.gif" class="title-1" /><br />
                                                                            <h4>Ut tellus dolorapibus eget elemeel. </h4> 
                                                                            <p>Sed laoreet aliquam leo. Ut tellus dolorapibus eget element vel, cursus eleifend, elit. Aenean auctor wisi et </p>
                                                                            <p>Sed laoreet aliquam leo. Ut tellus  </p>
                                                                            <a href="#" class="link3">more info</a>            
                                                                        </div>                                     
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>   
                    </div>
                </div>
            </div>
        </div>
     </div>
</div>   
<div id="footer">
    <div class="bot-left">
        <div class="bot-right">
            <div class="indent-footer">Doggie &nbsp;&copy; 2009 &nbsp;<a href="index-5.html">Privacy Policy</a></div>
        </div>
    </div>
</div>

4

3 に答える 3

1

これは、これらの要素に箇条書きを追加するために機能します。

.boxlist li {
    list-style-type: disc;
    list-style-position: inside;
}

箇条書きは、デフォルトでリストの境界ボックスの外側に表示されるため、親 div によって隠されています。箇条書きをバウンディング ボックス (上図) の内側に移動するか、それらに margin-left を設定することができます。

于 2012-04-26T02:58:14.107 に答える
0

直接の<li>子を取得するには、次のようにします。

$(".boxlist").children();

(私はあなたが jQuery を使っていると思っていましたが、おそらくあなたは使っていないことがわかりました。)

于 2012-04-26T02:56:23.037 に答える
0

たとえば、この css を使用して調整します。私が正しく理解していれば、これは役立つはずです。

元。.boxlist li{color:#f1f;}

于 2012-04-26T02:58:18.683 に答える