无法格式化并显示<hr />

时间：2015-03-02 05:02:30

标签： html css rules

我仍然很擅长编码所以请耐心等待...我已经读过不同的浏览器以不同的方式显示水平规则。我似乎无法在Firefox或Chrome中使用它（到目前为止我只检查了两个）。这是我的hr在Firefox中的样子：

http://postimg.org/image/g2vn1cm3b/

最高规则是它需要的地方。最后两列有不稳定的规则。

这里是Chrome：

http://postimg.org/image/wl98cvi5p/

第二和第三列都很好，第一列搞砸了。

由于我的网站不在任何地方，我将在这里包含我的HTML和CSS。

@charset "UTF-8";

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

/* HTML5 display-role reset for older browsers */

ol, ul {
	list-style: none;
}

html {
	background-color:#96d5cd;
}


#container {
	width:980px;
	border:1px solid #1f5c54;
	background-color:white;
	margin:2em auto;
}

hr {
padding:0px;
margin:0px;
display:block;
border-bottom: 1px solid black;
}

#footer {
	text-decoration:none;
	color:black;
	text-transform:uppercase;
	font-family:amaranth, trebuchet, verdana, sans-serif;
margin-left:14em;
}

#footer li {
display:inline;
}

#main {
position:relative;
background-color:#fec161;
height:700px;
margin-top:0px;
margin-left:10px;
margin-right:10px;
}

#main #content {
margin-top:10px;
margin-left:10px;
margin-right:10px;
height:400px;
text-align:justify;
}

#nav {
	text-decoration: none;
	color: black;
	text-transform: uppercase;
	font-family: patua-one;
	margin-top: 40px;
	font-style: normal;
	font-weight: 400;
background-color:#fec161;
width:920px;
height:40px;
margin-left:10px;
} 

#nav li{
display:inline;

}

#nav li {
margin-left:0px;
}

#social {
float:right;
}

#social li {
margin-right:3.5px;
}

#social li{
display:inline;
}
a {
	text-decoration: none;
	color: black;
	margin-top: 0px;
	font-style: normal;
}

a:hover {
	text-decoration:none;
	color:#fff;
}

#feature {
padding-left:10px;
overflow:hidden;
width:960px;
}


#footer {
	font-family:amaranth;
	text-decoration:none;
	color:black;
	text-transform:uppercase;
	margin-top:0px;
}

#header {
	font-family:patua-one;
	text-decoration:none;
	color:black;
	text-transform:uppercase;
	margin-top:0px;
	font-size:24px;
}

#header img {
	float:left;
margin-left:10px;
margin-top:10px;
}

h1 {
	font-size: 24px;
	font-family: patua-one;
	font-style: normal;
	font-weight: 400;
	text-transform: uppercase;
padding-top:10px;
}

#column1 {
float:left;
width:275px;
margin-left:10px;
margin-right:30px;
text-align:justify;
}

#column2 h2{
float:left;
width:275px;
margin-left:90px;
}

#column2 {
float:left;
width:275px;
margin-right:0px;
text-align:justify;
margin-left:20px;
}


#column3 {
float:right;
width:275px;
margin-right:10px;
text-align:justify;
}

#column3 h2 {
	float:left;
	width:275px;
	margin-left:220px;
}

h2 {
	font-weight: 400;
	text-transform: uppercase;
	line-height: 100%;
	@import url(http://fonts.googleapis.com/css?family=Patua+One);
	font-family: patua-one;
	font-style: normal;
	font-size:24px;
}

#columns {
	margin-top:20px;
}

h3 {
font-family:amaranth;
}

div span.welcome {
	font-size: 24px;
	font-family: patua-one;
	font-style: normal;
	font-weight: 400;
	text-transform: uppercase;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>WELCOME :: Katie J Hunter :: Graphic Designer</title>

<link ref="css/style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/images/favicon.ico" />
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Patua+One">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/patua-one:n4:default;amaranth:n4:default.js" type="text/javascript"></script>

</head>

<body>

<div id="container">

	<div id="header">
    <img src="images/KatieHunterLogo.png" alt="Katie Hunter Graphic Designer Logo" /><br />
    
    <br />
    
    <ul id="social">
    	<p><li><a href="https://www.facebook.com/pages/Katie-Hunter-Graphic-Designer/1532575640337137" target="_blank"><img src="images/socialmedia_facebook.png" alt="Facebook" /></a></li>
        <li><a href="https://www.twitter.com/kinetickatie" target="_blank"><img src="images/socialmedia_twitter.png" alt="Twitter" /></a></li>
        <li><a href="https://www.linkedin.com/in/katiejohunter" target="_blank"><img src="images/socialmedia_linkedin.png" alt="Linked In" /></a></li>
    </p></ul>
    
    <ul id="nav"><p>
    <li><a href="index.html" target="_blank">Home</a></li> :: 
    <li><a href="about.html" target="_blank">About</a></li> :: 
    <li><a href="services.html" target="_blank">Services</a></li> :: 
    <li><a href="portfolio.html" target="_blank">Portfolio</a> :: 
    <li><a href="blog.html" target="_blank">Blog</a></li> :: 
    <li><a href="contact.html" target="_blank">Contact</a></li>
    </p></ul>
	</div><!-- end header -->
    
    <div id="feature">
    
    	<span class="accentbar"><img src="images/FeatureBanner.jpg" alt="banner" class="banner" /></span><br>
    
    </div><!-- end feature -->
    
    <div id="main">
    	<div id="content">
        <h1><span class="welcome">Welcome!</span></h1>
        <hr style="height:1px; width:100%; border:1px solid black; background-color:black;" />
        
        <h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sapien velit, dictum vel semper id, vestibulum eu nisi. Phasellus ac ornare sapien. Praesent eget libero mollis ipsum eleifend lacinia non ut ligula. Sed quis sem at est laoreet aliquet. Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim. Etiam odi o nibh, bibendum vel eros malesuada, elementum blandit quam. Integer aliquet finibus felis et eleifend.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sapien velit, dictum vel semper id, vestibulum eu nisi. Phasellus ac ornare sapien. Praesent eget libero mollis ipsum eleifend lacinia non ut ligula. Sed quis sem at est laoreet aliquet. Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim. Etiam odio nibh, bibendum vel eros malesuada, elementum blandit quam. Integer aliquet finibus felis et eleifend.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sapien velit, dictum vel semper id, vestibulum eu nisi. Phasellus ac ornare sapien. Praesent eget libero mollis ipsum eleifend lacinia non ut ligula. Sed quis sem at est laoreet aliquet. Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim. Etiam odio nibh, bibendum vel eros malesuada, elementum blandit quam. Integer aliquet finibus felis et eleifend.</h3>
		   </div><!-- end content -->
          <div id="columns">
            <div id="column1">
    <h2>Services</h2><br />
    <hr style="height:1px; width:100%; border:1px solid black; background-color:black;" />
	<h3>Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim.</h3>
    </div><!-- end column1 -->

    <div id="column2">
     <h2>Clients</h2><br />
     <hr style="height:1px; width:100%; border:1px solid black; background-color:black;" />
     	<h3>Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim.</h3>
    </div><!-- end column2 -->

    <div id="column3">
     <h2>Blog</h2><br />
     <hr style="height:1px; width:100%; border:1px solid black; background-color:black;" />
     <h3>Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim.</h3>
    </div><!-- end column3 -->
    	</div><!-- end columns -->
    </div><!-- end main -->
    
    	<div id="footer">
        <span><p>© copyright 2015 katie j hunter • all rights reserved</p></span><br />
        <ul id="nav2">
    		<li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/index.html" target="_blank">Home</a></li> | 
    		<li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/about.html" target="_blank">About</a></li> | 
    		<li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/services.html" target="_blank">Services</a></li> | 
    		<li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/portfolio.html" target="_blank">Portfolio</a></li> | 
    		<li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/blog.html" target="_blank">Blog</a></li> |
    		<li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/contact.html" target="_blank">Contact</a></li>
    	</ul>
	</div>
       </div><!-- end footer -->

</div><!-- end container -->



</body>
</html>

我做错了什么？请善待，我仍然很新，一直在关注如何做到这一点的视频教程。

1 个答案:

答案 0 :(得分：0)

我已为hr清除了浮动并删除了<br/> 

@charset "UTF-8";

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

/* HTML5 display-role reset for older browsers */

ol, ul {
	list-style: none;
}

html {
	background-color:#96d5cd;
}


#container {
	width:980px;
	border:1px solid #1f5c54;
	background-color:white;
	margin:2em auto;
}

hr {
padding:0px;
margin:0px;
display:block;
border-bottom: 1px solid black;
}

#footer {
	text-decoration:none;
	color:black;
	text-transform:uppercase;
	font-family:amaranth, trebuchet, verdana, sans-serif;
margin-left:14em;
}

#footer li {
display:inline;
}

#main {
position:relative;
background-color:#fec161;
height:700px;
margin-top:0px;
margin-left:10px;
margin-right:10px;
}

#main #content {
margin-top:10px;
margin-left:10px;
margin-right:10px;
height:400px;
text-align:justify;
}

#nav {
	text-decoration: none;
	color: black;
	text-transform: uppercase;
	font-family: patua-one;
	margin-top: 40px;
	font-style: normal;
	font-weight: 400;
background-color:#fec161;
width:920px;
height:40px;
margin-left:10px;
} 

#nav li{
display:inline;

}

#nav li {
margin-left:0px;
}

#social {
float:right;
}

#social li {
margin-right:3.5px;
}

#social li{
display:inline;
}
a {
	text-decoration: none;
	color: black;
	margin-top: 0px;
	font-style: normal;
}

a:hover {
	text-decoration:none;
	color:#fff;
}

#feature {
padding-left:10px;
overflow:hidden;
width:960px;
}


#footer {
	font-family:amaranth;
	text-decoration:none;
	color:black;
	text-transform:uppercase;
	margin-top:0px;
}

#header {
	font-family:patua-one;
	text-decoration:none;
	color:black;
	text-transform:uppercase;
	margin-top:0px;
	font-size:24px;
}

#header img {
	float:left;
margin-left:10px;
margin-top:10px;
}

h1 {
	font-size: 24px;
	font-family: patua-one;
	font-style: normal;
	font-weight: 400;
	text-transform: uppercase;
padding-top:10px;
}

#column1 {
float:left;
width:275px;
margin-left:10px;
margin-right:30px;
text-align:justify;
}

#column2 h2{
float:left;
width:275px;
margin-left:90px;
}

#column2 {
float:left;
width:275px;
margin-right:0px;
text-align:justify;
margin-left:20px;
}


#column3 {
float:right;
width:275px;
margin-right:10px;
text-align:justify;
}

#column3 h2 {
	float:left;
	width:275px;
	margin-left:220px;
}

h2 {
	font-weight: 400;
	text-transform: uppercase;
	line-height: 100%;
	@import url(http://fonts.googleapis.com/css?family=Patua+One);
	font-family: patua-one;
	font-style: normal;
	font-size:24px;
}

#columns {
	margin-top:20px;
}

h3 {
font-family:amaranth;
}

div span.welcome {
	font-size: 24px;
	font-family: patua-one;
	font-style: normal;
	font-weight: 400;
	text-transform: uppercase;
}
hr {
  clear: both;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>WELCOME :: Katie J Hunter :: Graphic Designer</title>

<link ref="css/style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/images/favicon.ico" />
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Patua+One">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/patua-one:n4:default;amaranth:n4:default.js" type="text/javascript"></script>

</head>

<body>

<div id="container">

	<div id="header">
    <img src="images/KatieHunterLogo.png" alt="Katie Hunter Graphic Designer Logo" /><br />
    
    <br />
    
    <ul id="social">
    	<p><li><a href="https://www.facebook.com/pages/Katie-Hunter-Graphic-Designer/1532575640337137" target="_blank"><img src="images/socialmedia_facebook.png" alt="Facebook" /></a></li>
        <li><a href="https://www.twitter.com/kinetickatie" target="_blank"><img src="images/socialmedia_twitter.png" alt="Twitter" /></a></li>
        <li><a href="https://www.linkedin.com/in/katiejohunter" target="_blank"><img src="images/socialmedia_linkedin.png" alt="Linked In" /></a></li>
    </p></ul>
    
    <ul id="nav"><p>
    <li><a href="index.html" target="_blank">Home</a></li> :: 
    <li><a href="about.html" target="_blank">About</a></li> :: 
    <li><a href="services.html" target="_blank">Services</a></li> :: 
    <li><a href="portfolio.html" target="_blank">Portfolio</a> :: 
    <li><a href="blog.html" target="_blank">Blog</a></li> :: 
    <li><a href="contact.html" target="_blank">Contact</a></li>
    </p></ul>
	</div><!-- end header -->
    
    <div id="feature">
    
    	<span class="accentbar"><img src="images/FeatureBanner.jpg" alt="banner" class="banner" /></span><br>
    
    </div><!-- end feature -->
    
    <div id="main">
    	<div id="content">
        <h1><span class="welcome">Welcome!</span></h1>
        <hr style="height:1px; width:100%; border:1px solid black; background-color:black;" />
        
        <h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sapien velit, dictum vel semper id, vestibulum eu nisi. Phasellus ac ornare sapien. Praesent eget libero mollis ipsum eleifend lacinia non ut ligula. Sed quis sem at est laoreet aliquet. Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim. Etiam odi o nibh, bibendum vel eros malesuada, elementum blandit quam. Integer aliquet finibus felis et eleifend.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sapien velit, dictum vel semper id, vestibulum eu nisi. Phasellus ac ornare sapien. Praesent eget libero mollis ipsum eleifend lacinia non ut ligula. Sed quis sem at est laoreet aliquet. Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim. Etiam odio nibh, bibendum vel eros malesuada, elementum blandit quam. Integer aliquet finibus felis et eleifend.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sapien velit, dictum vel semper id, vestibulum eu nisi. Phasellus ac ornare sapien. Praesent eget libero mollis ipsum eleifend lacinia non ut ligula. Sed quis sem at est laoreet aliquet. Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim. Etiam odio nibh, bibendum vel eros malesuada, elementum blandit quam. Integer aliquet finibus felis et eleifend.</h3>
		   </div><!-- end content -->
          <div id="columns">
            <div id="column1">
    <h2>Services</h2>
    <hr style="height:1px; width:100%; border:1px solid black; background-color:black;" />
	<h3>Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim.</h3>
    </div><!-- end column1 -->

    <div id="column2">
     <h2>Clients</h2>
     <hr style="height:1px; width:100%; border:1px solid black; background-color:black;" />
     	<h3>Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim.</h3>
    </div><!-- end column2 -->

    <div id="column3">
     <h2>Blog</h2>
     <hr style="height:1px; width:100%; border:1px solid black; background-color:black;" />
     <h3>Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim.</h3>
    </div><!-- end column3 -->
    	</div><!-- end columns -->
    </div><!-- end main -->
    
    	<div id="footer">
        <span><p>© copyright 2015 katie j hunter • all rights reserved</p></span><br />
        <ul id="nav2">
    		<li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/index.html" target="_blank">Home</a></li> | 
    		<li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/about.html" target="_blank">About</a></li> | 
    		<li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/services.html" target="_blank">Services</a></li> | 
    		<li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/portfolio.html" target="_blank">Portfolio</a></li> | 
    		<li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/blog.html" target="_blank">Blog</a></li> |
    		<li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/contact.html" target="_blank">Contact</a></li>
    	</ul>
	</div>
       </div><!-- end footer -->

</div><!-- end container -->



</body>
</html>

相关问题
最新问题