Html Dreamweaver设计和live view展示了不同的东西？

请查看以下图片：

（设计视图） （实时和浏览器视图）

正如您在设计视图中看到的，页面上的所有内容看起来都很好，这也是我想要的！但是，当我在网络浏览器中进入实时查看或预览时，它会显示不同的内容，其中一些内容与我的导航重叠。我真的不知道该怎么办？我将在下面显示我的代码：

HTML:

对不起，如果我提供了太多的信息，我是比较新的设计网站和编程

---

谢谢。

如果您想使用Dreamweaver，您应该放弃设计视图，养成在浏览器中预览所有内容并使用浏览器web检查器进行故障排除的习惯

如果您真的想看到css和定位的实时预览，您可以在web inspector中进行一些操作。如果你有机会访问Mac，你应该考虑MaCube上的意大利浓咖啡。

---

另外，请注意Dreamweaver正在制作的不间断空格返回（

）标记，删除它们并使用css来代替。
可能您的DW版本没有将某些HTML5元素视为块类型元素。作为对程序的让步，您可以在css中的nav元素中添加一行：

display: block;

从而在键入时盗用设计视图的“预测”

编辑从这里开始：
我自己使用设计视图键入内容。对于某些UTF字符，例如双引号，它可能很方便。我在写（未排序的）列表时经常使用它。有时，我使用它来键入内容，而不启用视觉辅助或css。我的建议是将其用作一种工具，但同时打开浏览器，并加载文档。Adobe提供了一些教程，这些教程提供的策略几乎可以在“设计”视图中对页面进行一致的预览，但这几乎是不可能的。Live view提供了更好的标准

由于一条注释，我尝试了DW5.5中的代码。我想看看我能在多大程度上保持导航和主标签，并将它们作为浮标。
为了在设计视图和实时视图的预览中保持一致性（在windows上点击ALT+11），一个清除浮动的包装器（参见Louis Lazaris文章的链接）似乎有帮助

我尝试了接触标志的金字塔布局作为浮动，但我不能中心的两个链接下面没有太多的喧闹正确。为了使它们也居中，我将它们显示为内联块

此外，导航列表项上的填充有点异国情调，两侧各占50%


html，
身体{
宽度：100%；
}
身体{
字体：18px/1.25“Segoe UI灯”；
颜色：#0099FF；
}
html,body,，
h1，h2，h3，p，ul，li，
分区，
主导航，
a、 img，
img{
保证金：0；
边界：无；
填充：0；
}
h1{
字号：2.618em；
文本对齐：居中；
填充：1em 0；
左缘：20%；
保证金权利：5%；
}
a{
颜色：#0099FF；
文字装饰：无；
}
.包裹{
宽度：100%；
溢出：隐藏；
}
主导航{
浮动：左；
文本对齐：居中；
}
导航{
溢出：隐藏；
位置：相对位置；
宽度：20%；
}
主要{
宽度：75%；
文本对齐：居中；
}
保险商实验室{
列表样式类型：无；
}
导航ul{
}
李国荣{
字号：1.666em；
}
海军ulli a{
显示：块；
线高：2.25；
}
.contactheader{
字号：1.666em；
}
.通讯录内容{
字号：1em；
}
.通讯录{
显示：内联块；
保证金：自动；
}
.通讯录{
}
.联系方式{
显示：内联块；
填料：1米1米；
保证金：0自动；
}
.contactsms ul li img{
空白：nowrap；
垂直对齐：文本底部；
}
.空白{
高度：2米；
}

联系我们



与DreamWeaver取得联系：

如果您对设计视图如何帮助您的“工作流程”、其功能和残疾感兴趣，请参阅以下AdobeTV教程：








不要依赖或使用dreamweaver的设计视图功能。渲染东西很糟糕。本地测试并检查浏览器中的元素，看看它在做什么。很抱歉，我不想听起来是什么意思，但“设计视图”不是浏览器，不应该使用。这是为那些不知道如何编码的业余爱好者准备的。使用真正的浏览器和浏览器的调试器。
nav {
float:left;
position:relative;
}

nav ul li {
display:block;
margin:20%;
padding:30%;
list-style-type: none;
font-family:Segoe UI Light;
font-size:30px;
text-align: center;
}

#contactheader {
text-align:center;
color:#0099FF;
font-family:Segoe UI Light, sans-serif;
font-size:20px;
}

#contactcontent {
text-align:center;
color:#0099FF;
font-family:Segoe UI Light, sans-serif;
font-size:18px;
}

#contacthotmail {
text-align:center;
color:#0099FF;
font-family:Segoe UI Light, sans-serif;
font-size:18px;
}

#contactsm {
text-align:center;
    color:#0099FF;
font-family:Segoe UI Light, sans-serif;
font-size:18px;
margin-top:40px;

}

display: block;