html - 格式化和显示 <hr> 时遇到问题

标签 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>

我做错了什么？请客气，我在这方面还很陌生，一直在观看有关如何执行此操作的视频教程。

最佳答案

我已经清除了 hr 的 float 并删除了 <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>

关于html - 格式化和显示 <hr> 时遇到问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28803000/

上一篇：html - 具有不同文字大小的 float 正在中断

下一篇：css - 停止绝对定位元素与左列 CSS 重叠

相关文章：

apache - 如何将 .htaccess 拒绝操作更改为 "abort"

html - 避免在每个 html 表格单元格上使用 CSS 类？

java - 流口水规则流程

javascript - 如何让JS在缓存中存储随机元素？

javascript - 由于 CORS 问题，AJAX POST 未使用 body-parser 向express.js 服务器发送请求

python - HTTP基本认证，使用python

html - 适用于 Firefox 和 Chrome；不在 IE8 上

c# - 在页面加载时更改 Aspx 页面正文图像 - ASP.Net

jquery - CSS 表格布局 - 填充第二行之前压扁

phpcs:如何修改 PSR2 以检查大括号是否与方法在同一行？

©2024 IT工具网  联系我们