postimg

postimg

关注
发信
关注(28)粉丝(399)

html - 格式化和显示<hr>时出现问题

我对编码还是很陌生，所以请耐心等待……我读到不同的浏览器以不同的方式显示水平规则。在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的浮动并删除了<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>

09-26 15:43
Powered by LMLPHP ©2024 postimg 0.033234