我正在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! Here you'll find just what you're looking for - with a big extra bonus: FUN! 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. 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 />
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 />
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 />
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> <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 © 2009 <a href="index-5.html">Privacy Policy</a></div>
</div>
</div>
</div>
答案 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;}