css - 网站溢出

标签 css html xhtml

当我制作我的网站时,我用 div 标签而不是表格来制作它,这是大多数人所做的,然后我用 margin 属性定位它们,我尝试过使用 position:absolute 和 relative 属性,但是当我重新 -调整我的浏览器大小,一切都会改变,就像这样 - enter image description here

我希望它留在原地,就像大多数使用 div 标签的网站一样,当您调整它们的大小时它们不会移动,我想知道它们使用了什么技巧...

顺便说一句,我的网站仍在 build 中,哈哈...谢谢

我的代码

<html>
<head>
<title></title>
<link rel = "stylesheet" type = "text/css" href = "verdanacssstylesheet.css" />
<script type="text/javascript" src="external files/jquery.js"></script>
<!-----------START OF SCRIPT------------------------>
<script type = "text/javascript" >

</script>
<!------------END OF SCRIPT AND START OF STYLE-->
<style type = "text/css" >
div {border:2px solid black;}

</style>
<!---------------END OF STYLE AND HEAD AND START OF BODY---------->
</head>

<body style="margin:0px;padding:0px;" text="black" >
<div style="" >
<div id = "header" style="100%;height:150px;" >
<div id = "headerinside" style="margin-left:auto;margin-right:auto;width:1030px;height:150px;" ><div></div></div>
</div>
<div style="width:1030px;height:;margin-left:auto;margin-right:auto" >

<div style = "border:2px solid red;height:30px;" id = "navigationbar" >
<ul style = "list-style:none;" id = "navbar" >
<li style = "float:left;padding-left:45px;line-height:3px;" >hello</li>
<li style = "float:left;padding-left:120px;line-height:3px;" >hello</li>
<li style = "float:left;padding-left:120px;line-height:3px;" >hello</li>
<li style = "float:left;padding-left:120px;line-height:3px;" >hello</li>
<li style = "float:left;padding-left:120px;line-height:3px;" >hello</li>
<li style = "float:left;padding-left:120px;line-height:3px;" >hello</li>
</ul>
</div>

<div id = "main" style="">
<div style="width:1026px;text-align:center;" ><p>hello</p></div>
</div>
<div id = "footer" style="100%;height:150px;" >
<div id = "footerinside" style="margin-left:auto;margin-right:auto;width:1030px;;height:150px;" ><div></div></div>
</div>
</div>
</body>
<!---------------EDN OF BODY------------------->
</html>

最佳答案

div s 是 block 元素,这意味着它们会自动扩展以填充其包含元素的宽度。如果您不希望它们随着浏览器窗口展开,您应该考虑将它们包装在一个包含 div 的容器中。具有显式宽度,或为每个 div 设置显式宽度.

这是我根据您的模型做出的最佳猜测;例如,如果您在 jsfiddle 上发布一些代码,您可能会得到更具体的答案:)

[更新]

我已经稍微清理了您的代码。我不认为所有 div s 具有匹配的开始和结束标签,但很难分辨。

我已经从内联样式中删除了您的 CSS。有很多重复,除了使代码难以阅读之外,还意味着更改不一定会显示出来,因为它们在其他声明中被覆盖了。

我的修改版本中的关键是 <div id="wrapper"> .您会在相应的样式中看到 #wrapper设置为 500 像素宽并水平居中。

这是 jsfiddle与我的更新。

关于css - 网站溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6471615/

相关文章:

css - CSS specificity中的points是怎么计算的

css - 更改面板组件的 primefaces 标题样式

javascript - 宽度为 100% 的可扩展/可收缩列

JavaScript - 如何将 6 个单独的订单总计函数合并为一个

html - 使用 doctype DTD XHTML+RDFa 1.0//EN 比 XHTML 1.0 Strict 有什么好处?

javascript - 没有jquery的视差淡入淡出

html - 在导航栏正下方添加背景图片

c# - Winforms WebBrowser 设置最大内容宽度

javascript - jquery不改变元素的src

java - 似乎无法弄清楚如何使用 primefaces 重定向到 .xhtml