我在html页面上创建了一行,它位于导航面板上方。小提琴如下:

http://jsfiddle.net/rupsdino1997/1md3phmo/

HTML:

<meta charset="UTF-8">
<title>Feline</title>
<link href="Styles/main.css" rel="stylesheet" type="text/css">


<body>
<div id="wrapper">
<header id="top">

      <h1 style="font-size:60px">L'Auberge De Napoleon III</h1>
      <hr style="background-color: red; height: 4px; position: relative; bottom: -23px; border:none" width="100%">
      <hr style="background-color: blue; height: 4px; position: relative; bottom: -11px; left:100px; border:none" width="80%">
      <hr style="background-color: purple; height: 4px; position: relative; bottom: 1px; left:200px; border:none" width="60%">
      <hr style="background-color: orange; height: 4px; position: relative; bottom: 13px; left:300px; border:none" width="40%">
      <hr style="background-color: green; height: 4px; position: relative; bottom: 25px; left:400px; border:none" width="20%">

     <nav id="mainnav">
        <ul style="border-left:green, dashed;">
          <li><a href="Index.html" class="thispagehome">Home</a></li>
          <li><a href="Properties Features.html">Features</a></li>
          <li><a href="Activities.html">Activities</a></li>
          <li><a href="Contact.html">Contact US</a></li>
          <li><a href="Pricing.html">Pricing</a></li>
        </ul>
    </nav>

 </header>
    <h1 style="padding-top:30px" >Feline - Activities</h1>
    <hr class="style" width="50%">
    <table style="width:100%">
        <tr>
            <td width="39%">d</td>
            <td width="61%">d</td>
        </tr>
        <tr>
            <td>dd</td>
            <td>dd</td>
         </tr>
     </table>

<footer>Footer</footer>


CSS:

@charset "utf-8";

body {
    margin: 0px;
    color: #151515;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    background-color: #EFF5F8;
}

#slideshow {
    position:relative;
    height:530px;
    width:1000px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}

#wrapper {
    width: 100%;
    min-width: 740px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    border:#6627C9;
    background-color: #FFFFFF;

}

#slideshow img {
  height: 100%;
  width: 100%;
}

#top {
    overflow: hidden;
}

h1 {
    font-size: 65px;
    margin-top: 0px;
    margin-bottom: 14px;
    color: #3399DD;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    max-width: 100%;
    text-align: center;
}
h2 {
    margin-top: 0px;
}

#mainimg img {
    max-width: 100%;
    padding-top: 2px;
    padding-bottom: 2px;
}
h1, h2 {
    color: #3399CC;
    font-weight: 600;
    font-size: 36px;
}

.centered {
    margin-left: auto;
    margin-right: auto;
}

footer {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 2%;
    background-color: #43a6cb;
    color: #FFFFFF;
    position: relative;
    bottom: 0px;
}
a {
    font-weight: bold;
    text-decoration: none;
}

a:link {
    color: #FF6600;
}

a:visited {
    color: #FF944C;
}

#mainnav a:hover  ,#mainnav a:active,#mainnav a:focus , #mainnav a.thispagehome{
    color: #FFFFFF;
    text-decoration: none;
    background-color: red;
}

#mainnav ul   {
    list-style-type: none;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}
#mainnav a {
    width: 20%;
    background-color: #4D4D4D;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
    padding-top: 6px;
    padding-bottom: 6px;
    display: block;
    float: left;
}


#wrapper #main ul.horizontal li
{
    display: inline-block;
    list-style; none;
}

#wrapper #main .horizontal img {
    height: 250px;
    width: 200px;
    margin-top: 15px;
}

*
{
    box-sizing: border-box;
}

#wrapper #main ul.horizontal li {
    display: inline-block;
    font-size: 16px;
    list-style; none;
    padding: 1em;
    text-align: justify;
    vertical-align: top;
    width: 25%;
}

img{
    display: block;
}

ul.horizontal {
    list-style; none;
    margin: 0;
    padding: 20;
    font-size: 0;
}


有人知道为什么我的hr和nav面板之间有空格吗? <hr>标记会自动进行某种填充吗?有人知道怎么修这个东西吗?

另外,如果有什么知道的,我可以做的是,如果您分别悬停每个链接框,背景将更改为hr线的颜色。 (检查此链接,我希望与此类似):

http://css-tricks.com

最佳答案

尝试这个:
http://jsfiddle.net/1md3phmo/5/

hr的编辑:

 <hr style="background-color: red; height: 4px; border:none" width="20%">
  <hr style="background-color: blue; height: 4px;  border:none" width="20%">
  <hr style="background-color: purple; height: 4px;  bottom: 1px; border:none" width="20%">
  <hr style="background-color: orange; height: 4px; border:none" width="20%">
  <hr style="background-color: green; height: 4px;border:none" width="20%">


的CSS

hr{float:left; margin:0;}

10-05 20:53
查看更多