HTML有序列表 - 跳过数字?

时间:2015-02-05 14:32:27

标签: html css list

我的大学项目是创建一个包含3层,多媒体和站点地图的网页。 听起来很简单,但是我无法找到导致我的有序列表跳过数字2和3的代码部分。

我现在已经把头发拉了两天,我决定在网上提交我的查询,看看专业人士是否能发现问题。

到目前为止,我刚刚创建了顶层,并添加了内容和多媒体(未经过研究),只是为了看看它的外观。

我一直在使用W3Schools http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_ordered,当列表被隔离时,它工作正常,但当添加到页面时,它开始跳过数字。

有人可以帮助我吗?



.col-2-3 {
    width: 66.66%;
}

.col-1-3 {
    width: 33.33%;
}

h1 {
    color: green;
    background: blue;
    border: 1px dashed black;
    padding: 2px;
    width: 1305px;
}

h2 {
    font-style: italic;
    text-shadow: 3px 2px #000;
    color: #ff0;
    font-size: 36px;
}

li {
    padding-left: 140px
}

p {
    font-size: 20px
}

video {
    float: right;
    Margin-right: 5px;
    border-right: 5px;
}

<!DOCTYPE HTML>

<html Lang="en">
<div class="grid">
  <div class="col-2-3">
  </div>
  <div class="col-1-3">
  </div>
</div>
<html>
<head>

  <title>Siberian Huskies</title>
  <link rel="stylesheet" href="style.css">

  <style>
    body {
      background-color: #b0c4de;
    }

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    li {
      float: left;
    }

    a {
      display: block;
      width: 60px;
      background-color: #b0c4de;
    }
  </style>
  <meta charset="UTF-8">
  <meta name="Description"
        content="All you will ever need to know about Siberian Huskies, Raw feeding
            Training, Activities"
  <meta name="keywords"
        content="siberian,huskies,husky,feeding,training,exercise,grooming,breed, breed standard,
            cross breeding,undercoat,vaccine,immunisation"
</head>

<body>
  <h1><img src="smbanner.png" alt="Snowy mountain" height="150" width="1300"></h1>
  <ul>
    <li><a href="Siberian Huskies.HTML">Home</a></li>
    <li><a href="Training.HTML">Training</a></li>
    <li><a href="Exercise.HTML">Exercise</a></li>
    <li><a href="Mushing.HTML">Mushing</a></li>
    <li><a href="FAQs.HTML">FAQs</a></li>
    <li><a href="About the Author.HTML">About</a></li>
  </ul>

  <h2> Siberian Huskies</h2>

  <p> Siberian Huskies are known the world over as hard working sled dogs. But the REAL truth is there is only one true
      "Husky" breed. We have all heard of the
      American Husky, which according to some breeders is not true husky but rather a mix of cold resistant dogs, with
      traits of low body mass and strong pulling
      instincts. The American Husky is a recognised breed (American Kennel Club) but the breed standard can vary wildly
      depending on which mix of animals is used
      to create the breed.</p>

  <p> The Siberian Husky is considered a "Pure Bred" which means it's blood line has not been diluted by other breeds, and
      is only coupled with other Siberian Huskies.
      The requirement to declare any dog a "Pure Bred" is regulated by the governing countries Kennel Club, for example if
      a person in Republic of Ireland
      wanted to breed two 'sibes' as pure bred, they first must comply with the IKC (Irish Kennel Club) and register their
      dogs with them, to do this they must first
      provide the following.

  <ol>
    <li>Parentage Certificate</li>
    <li>Pedigree certificate</li>
    <li>Life long breeder registration</li>
    <li>Submit a signed copy of the Kennel Clubs rules</li>
    <li>Provide hip,eye&ear scores</li>
    <li>The animal in question must meet the breed
        standard(http://www.thekennelclub.org.uk/services/public/breed/standard.aspx?id=5141
    </li>
    <li>Every litter planned or otherwise must be declared to the IKC and registered accordingly with microchip and
        Parentage documentation
    </li>
  </ol>
  <p>

    <video width="360" controls>

      <source src="Dogmush.mp4" type="video/mp4">
      <source src="Dogmush.ogg" type="video/ogg">
      Your browser does not support HTML5 video."
    </video>

  <p>
    Watch this video on:<a href="https://www.youtube.com/watch?v=vGACUR6poPc" target="_blank">YouTube</a>.
  </p>

  <p> This is where the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the
      dogs the dogs the dogs
      the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs
      the dogs the dogs the dogs
      the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs
      the dogs the dogs the dogs </p>

  </body>

</html>
&#13;
&#13;
&#13;

5 个答案:

答案 0 :(得分:1)

这是CSS:

li {float: left;}

您的号码出现在页面上,但它们隐藏在其他列表项的文本下面/中。删除float:left,它应该看起来正确。

答案 1 :(得分:0)

你的李有float: left。将其删除或将其更改为text-align:left。 别忘了关闭<p>标签!

答案 2 :(得分:0)

更改

li {
    float: left;
}

到这个

ul li {
    float: left;
}

这样,float仅适用于您的导航,但不适用于有序列表。 注意:作为长期解决方案,请查看元素ID和类。

答案 3 :(得分:0)

确保您只将样式应用于所需的特定元素。在您的项目中,您float:left所有li个元素。在这种情况下,您可以使用选择器ul li { float: left}来解决您的问题。

&#13;
&#13;
.col-2-3 {
  width: 66.66%;
}
.col-1-3 {
  width: 33.33%;
}

h1
{

	color : green ;
	background : blue ;
	border : 1px dashed black ;
	padding : 2px ;
	width : 1305px ;
	
}
h2 {
	font-style: italic;
    text-shadow: 3px 2px #000;
	color: #ff0;
	font-size:36px;
	}
	
ul li 
{
	padding-left:140px
}

p
{
	font-size:20px
}
	
video 
{
	float: right; 
	Margin-right: 5px;
	border-right: 5px;
}
&#13;
<!DOCTYPE HTML>

<html Lang="en">
<div class="grid">
  <div class="col-2-3">
  </div>
  <div class="col-1-3">
  </div>
</div>
<html>
<head>
	
	<title>Siberian Huskies</title>
	<link rel="stylesheet" href="style.css">
	
	<style>
	body {
    background-color: #b0c4de;
	}
	
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
	}

li {
    float: left;
	}

a {
    display: block;
    width: 60px;
    background-color: #b0c4de;
	}
</style>
	<meta charset="UTF-8">
	<meta name="Description"
		content="All you will ever need to know about Siberian Huskies, Raw feeding
				Training, Activities"
	<meta name ="keywords"
		content="siberian,huskies,husky,feeding,training,exercise,grooming,breed, breed standard,
				cross breeding,undercoat,vaccine,immunisation"
</head>
	
	<body>
	<h1><img src="smbanner.png" alt="Snowy mountain" height="150" width="1300"> </h1>
	<ul>
  <li><a href="Siberian Huskies.HTML">Home</a></li>
  <li><a href="Training.HTML">Training</a></li>
  <li><a href="Exercise.HTML">Exercise</a></li>
  <li><a href="Mushing.HTML">Mushing</a></li>
  <li><a href="FAQs.HTML">FAQs</a></li>
  <li><a href="About the Author.HTML">About</a></li>
</ul>
	
	<h2> Siberian Huskies</h2>
	<p> Siberian Huskies are known the world over as hard working sled dogs. But the REAL truth is there is only one true "Husky" breed. We have all heard of the
		American Husky, which according to some breeders is not true husky but rather a mix of cold resistant dogs, with traits of low body mass and strong pulling
		instincts. The American Husky is a recognised breed (American Kennel Club) but the breed standard can vary wildly depending on which mix of animals is used
		to create the breed.</p>
	<p> The Siberian Husky is considered a "Pure Bred" which means it's blood line has not been diluted by other breeds, and is only coupled with other Siberian Huskies.
		The requirement to declare any dog a "Pure Bred" is regulated by the governing countries Kennel Club, for example if a person in Republic of Ireland
		wanted to breed two 'sibes' as pure bred, they first must comply with the IKC (Irish Kennel Club) and register their dogs with them, to do this they must first	
		provide the following.	
		
	<ol>
		<li>Parentage Certificate </li>
		<li>Pedigree certificate </li>
		<li>Life long breeder registration </li>
		<li>Submit a signed copy of the Kennel Clubs rules </li>
		<li>Provide hip,eye&ear scores </li>
		<li>The animal in question must meet the breed standard(http://www.thekennelclub.org.uk/services/public/breed/standard.aspx?id=5141 </li>
		<li>Every litter planned or otherwise must be declared to the IKC and registered accordingly with microchip and Parentage documentation </li>
	</ol>
	<p>
		
<video width="360" controls>
	
  <source src="Dogmush.mp4" type="video/mp4">
  <source src="Dogmush.ogg" type="video/ogg">
  Your browser does not support HTML5 video." 
</video>

<p>
Watch this video on:<a href="https://www.youtube.com/watch?v=vGACUR6poPc" target="_blank">YouTube</a>.
</p>
		
	<p> This is where the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs
		the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs 
		the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs the dogs </p>
	
	</body>

</html>
&#13;
&#13;
&#13;

更好的方法是在菜单中添加ID,以便样式只会影响菜单li

<ul id="menu">
    <li><a href="">Menu Item</li>
    ...
</ul>

在CSS中:

ul#menu li {
    float: left;
}

答案 4 :(得分:0)

句子后你遗失的</p> ......

&#34;要求宣布任何一只狗&#34; Pure Bred&#34;由管理国家养犬俱乐部监管,例如,如果爱尔兰共和国的一个人想要养育两个西伯利亚俱乐部&#39;作为纯种,他们首先必须遵守IKC(爱尔兰养犬俱乐部)并将他们的狗注册,为此,他们必须首先提供以下内容。 [INSERT&lt; / p&gt;这里]

并在句子之后......

您的浏览器不支持HTML5视频。&#34; [INSERT&lt; / p&gt;这里]