在非常嵌套的DIV中设置列表样式

时间:2012-04-26 02:49:54

标签: html css

我正在http://www.richmindonline.com/doggy/index.html的网页上工作。我在页面中间附近设置单个列表时遇到了麻烦。我想将{list-style-type:disc;}添加为样式,但它不起作用。我想要应用样式的列表位于“欢迎”段落下,它特别位于标有“新闻”的4个框中的第1个框下。列表的第一项是“链接到新闻故事”。我尝试使用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>

3 个答案:

答案 0 :(得分:1)

这可以为这些元素添加项目符号。

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

您的项目符号被父级div隐藏,因为默认情况下它们出现在列表边界框之外。您可以将子弹移动到边界框内(如上所示)或在边框上设置边距。

答案 1 :(得分:0)

要获得直接<li>个孩子,您可以这样做:

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

(我假设你使用的是jQuery,我现在看到你可能没有这样做。)

答案 2 :(得分:0)

以此css为例进行调整。如果我理解正确,这应该会有所帮助。

实施例。  .boxlist li {color:#f1f;}