设置 <hr> 标签的样式

Question

我正在我的 html 页面上创建一行，它位于我的导航面板上方。 fiddle 如下：

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 面板之间有一个 space 吗？ <hr> 标签是否自动具有某种填充？有人知道如何解决这个问题吗？

此外，如果有人知道我该怎么做，那么如果您分别悬停每个 link 框，背景将更改为 hr 行的颜色。（检查此 link，我希望它与此类似）：

http://css-tricks.com

Answer 1

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

人力资源编辑：

 <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;}

Answer 2

问题是 hr 默认有一些边距，您不会删除它。

更好用

#top > hr {
  float: left;
  height: 4px;
  width: 20%;
  margin: 0;
  border: none;
}
#mainnav {
  clear: both;
}

#top > hr {
  float: left;
  height: 4px;
  width: 20%;
  margin: 0;
  border: none;
}
#mainnav {
  clear: both;
}
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;
}

<div id="wrapper">
  <header id="top">
    <h1 style="font-size:60px">L'Auberge De Napoleon III</h1>
      <hr style="background-color: red">
      <hr style="background-color: blue">
      <hr style="background-color: purple">                          
      <hr style="background-color: orange">
      <hr style="background-color: green">
    <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>
</div>

Answer 3

您可以在 css 文件中添加此代码来解决上述问题：

#mainnav {
    margin-top: -33px;
}

注意：但请记住，如果您不在 css 文件中使用以下代码（因此请始终在 css 如果您在 html 中使用 <hr>：

hr {
    padding: 0;
    margin: 0;
}

设置 <hr> 标签的样式

Styling an <hr> tag

html

css

padding