1
我還是很新的編碼，所以忍受着我......我讀過不同的瀏覽器顯示不同的水平規則。我似乎無法在Firefox或Chrome中正確使用它（目前爲止我只查看了兩個）。這裏是我小時的樣子在Firefox：問題格式化和顯示<hr>
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 {
\t list-style: none;
}
html {
\t background-color:#96d5cd;
}
#container {
\t width:980px;
\t border:1px solid #1f5c54;
\t background-color:white;
\t margin:2em auto;
}
hr {
padding:0px;
margin:0px;
display:block;
border-bottom: 1px solid black;
}
#footer {
\t text-decoration:none;
\t color:black;
\t text-transform:uppercase;
\t 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 {
\t text-decoration: none;
\t color: black;
\t text-transform: uppercase;
\t font-family: patua-one;
\t margin-top: 40px;
\t font-style: normal;
\t 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 {
\t text-decoration: none;
\t color: black;
\t margin-top: 0px;
\t font-style: normal;
}
a:hover {
\t text-decoration:none;
\t color:#fff;
}
#feature {
padding-left:10px;
overflow:hidden;
width:960px;
}
#footer {
\t font-family:amaranth;
\t text-decoration:none;
\t color:black;
\t text-transform:uppercase;
\t margin-top:0px;
}
#header {
\t font-family:patua-one;
\t text-decoration:none;
\t color:black;
\t text-transform:uppercase;
\t margin-top:0px;
\t font-size:24px;
}
#header img {
\t float:left;
margin-left:10px;
margin-top:10px;
}
h1 {
\t font-size: 24px;
\t font-family: patua-one;
\t font-style: normal;
\t font-weight: 400;
\t 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 {
\t float:left;
\t width:275px;
\t margin-left:220px;
}
h2 {
\t font-weight: 400;
\t text-transform: uppercase;
\t line-height: 100%;
\t @import url(http://fonts.googleapis.com/css?family=Patua+One);
\t font-family: patua-one;
\t font-style: normal;
\t font-size:24px;
}
#columns {
\t margin-top:20px;
}
h3 {
font-family:amaranth;
}
div span.welcome {
\t font-size: 24px;
\t font-family: patua-one;
\t font-style: normal;
\t font-weight: 400;
\t 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">
\t <div id="header">
<img src="images/KatieHunterLogo.png" alt="Katie Hunter Graphic Designer Logo" /><br />
<br />
<ul id="social">
\t <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>
\t </div><!-- end header -->
<div id="feature">
\t <span class="accentbar"><img src="images/FeatureBanner.jpg" alt="banner" class="banner" /></span><br>
</div><!-- end feature -->
<div id="main">
\t <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>
\t \t </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;" />
\t <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;" />
\t <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 -->
\t </div><!-- end columns -->
</div><!-- end main -->
\t <div id="footer">
<span><p>© copyright 2015 katie j hunter • all rights reserved</p></span><br />
<ul id="nav2">
\t \t <li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/index.html" target="_blank">Home</a></li> |
\t \t <li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/about.html" target="_blank">About</a></li> |
\t \t <li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/services.html" target="_blank">Services</a></li> |
\t \t <li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/portfolio.html" target="_blank">Portfolio</a></li> |
\t \t <li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/blog.html" target="_blank">Blog</a></li> |
\t \t <li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/contact.html" target="_blank">Contact</a></li>
\t </ul>
\t </div>
</div><!-- end footer -->
</div><!-- end container -->
</body>
</html>我做了什麼錯？請善待，我仍然很新，並且一直在關注如何做到這一點的視頻教程。
有服務後
，刪除第一列問題。刪除每個標題下的
標籤，並在CSS中爲hr提供'clear：both'。 – anpsmn 2015-03-02 05:07:18