我确定我不是第一个遇到此问题的人，但问题出在这里：我的网站在Firefox中看起来很棒，但在Dreamweaver和Chrome中看起来很糟糕。我一直在Firefox中编辑CSS以使其正确，然后我将其复制并粘贴到Dreamweaver中，这一切都很糟糕。
这就是它在Firefox中的外观和外观：
http://postimg.org/image/7gcm1tjxh/
在Chrome / Dreamweaver中：
http://postimg.org/image/ikq6ho2dp/
如您所见，顶部导航栏是垂直的，而不是水平的。并且页脚也在Chrome中聚集在一起。
我继续并包含了我的所有代码，因为我可能在另一个与其他元素相矛盾的元素中指定了一些东西。
在每个浏览器中将菜单恢复到水平并且页脚看起来正确的解决方案是什么？
@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;
clear:both;
}
#footer {
text-decoration:none;
color:black;
text-transform:uppercase;
font-family:amaranth, trebuchet, verdana, sans-serif;
margin-left:12px;
clear:both;
}
#footer li {
display:inline;
clear:both;
}
#footer ul{
margin-left:-37px;
margin-top:-30px;
}
#main {
position:relative;
background-color:#fec161;
height:700px;
margin-top:-10px;
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;
font-style: normal;
font-weight: 400;
background-color:#fec161;
width:920px;
height:70px;
margin-left:10px;
margin-top:60px;
}
#nav li{
display:inline;
}
#navigation {
margin-left:-30px;
padding-top:15px;
}
#social {
float:right;
}
#social li {
margin-right:10px;
margin-bottom:20px;
display:inline;
}
a {
text-decoration: none;
color: black;
margin-top: 0px;
font-style: normal;
}
a:hover {
text-decoration:none;
color:#1e777b;
}
#feature {
padding-left:10px;
overflow:hidden;
width:960px;
margin-top:-30px;
}
#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><p>
<div id="navigation">
<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>
<li><a href="blog.html" target="_blank">Blog</a> :: </li>
<li><a href="contact.html" target="_blank">Contact</a></li>
</div><!-- end navigation --></ul>
</div><!-- end header -->
<div id="feature">
<img src="images/FeatureBanner.jpg" alt="banner" class="banner" /><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">
© copyright 2015 katie j hunter • all rights reserved</span>
<ul>
<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><!-- end footer -->
</div><!-- end container -->
</body>
</html>
答案 0 :(得分：0)
在您的css中，您指定了#nav li，而您想要内联的元素是#navigation li
你也footer ul作为margin-top: -37px，这导致ul与版权信息捆绑在一起。
答案 1 :(得分：0)
您的HTML无效。您使用<p>和<div>标记作为列表元素（ul）的子项。
尝试替换，例如这样：
<ul><p>
<div id="navigation">
<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>
<li><a href="blog.html" target="_blank">Blog</a> :: </li>
<li><a href="contact.html" target="_blank">Contact</a></li>
</div><!-- end navigation --></ul>
有了这个：
<div id="navigation">
<ul>
<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>
<li><a href="blog.html" target="_blank">Blog</a> :: </li>
<li><a href="contact.html" target="_blank">Contact</a></li>
</ul>
</div><!-- end navigation -->
答案 2 :(得分：0)
我建议使用bootstrap框架工作。它支持最新的移动和浏览器。
[http://www.bootply.com/4kihU2HqGf][1]
[1]: http://getbootstrap.com/
/* CSS used here will be applied after bootstrap.css *//* CSS used here will be applied after bootstrap.css */
/* CSS used here will be applied after bootstrap.css */
.logo {
width: 210px;
}
.jumbotron {
}
h1.name {
color: #125952;
border-bottom: 4px solid #ffbc6b;
margin-bottom: -19px;
}
.primary {
background-color: #ffbc6b;
border-radius: 1px;
}
.main-content {
background-color: #ffbc6b;
}
.navbar-default .navbar-nav > li > a {
color: #000;
}
.welcome {
border-bottom: 4px solid #000;
color: #000;
padding-bottom: 8px;
}
p {
color: #000;
font-weight: 400px;
}
.columns {
color: #000;
border-bottom: 3px solid #000;
padding-bottom: 8px;
margin-bottom: 8px;
}
section {
background-color: #ffbc6b;
padding: 10px;
}
.row {
background-color: #ffbc6b;
}
.footer {
background-color: #fff;
margin: -12px 0px 0 -44px !important;
}
.navbar-default {
border: none;
}
.copyright{
margin-top: 10px;
}
<div class="container">
<header>
<div class="logo">
<h1 class="name">Katie Hunter</h1>
<h3 class="subtitle">Graphic Designer</h3>
</div><!-- end logo -->
<nav class="navbar navbar-default primary">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">HOME :: <span class="sr-only">(current)</span></a></li>
<li><a href="#">ABOUT ::</a></li>
<li><a href="#">SERVICES ::</a></li>
<li><a href="#">PORTFOLIO ::</a></li>
<li><a href="#">BLOG ::</a></li>
<li><a href="#">CONTACT ::</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- end nav -->
</header><!-- header -->
<div class="jumbotron">
<h1>Your images goes here!</h1>
</div>
<div class="container-fluid main-content">
<div class="col-sm-12">
<h1 class="welcome">Welcome</h1>
<p><strong>lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book.
It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with
the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout. The point of using
Lorem Ipsum is that it has a more-or-less normal distribution of letters, as
opposed to using 'Content here, content here', making it look like readable
English. Many desktop publishing packages and web page editors now use Lorem
Ipsum as their default model text, and a search for 'lorem ipsum' will
uncover many web sites still in their infancy. Various versions have
evolved over the years, sometimes by accident, sometimes on purpose
(injected humour and the like).</strong></p>
</div><!-- end of col -->
<div class="col-sm-4">
<h2 class="columns">SERVICES</h2>
<p>lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book.</p>
</div>
<div class="col-sm-4">
<h2 class="columns">SERVICES</h2>
<p>lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book.</p>
</div>
<div class="col-sm-4">
<h2 class="columns">SERVICES</h2>
<p>lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book.</p>
</div>
</div><!-- end of container-fluid -->
<div class="container copyright">
<div class="col-sm-6 ">
<p>© COPYRIGHT 2015 Katie J Hunter - ALL RIGHTS RESERVED</p>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<ul class="nav navbar-nav footer">
<li><a href="#">HOME <span class="sr-only">(current)</span></a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div><!-- /.container-fluid --></nav></div>