css - 为什么我的 Div 标签被推到左边几个像素？-6ren

css - 为什么我的 Div 标签被推到左边几个像素？

转载作者：太空宇宙更新时间：2023-11-04 04:49:17

25

4

我正在尝试为一些类(class)作业建立一个网站，但出于某种原因，我的两个中间栏被推到了左边。页眉、导航栏和页脚都垂直对齐，但中间的两个 float div 被迫向左对齐。

HTML

<html>
<head>
    <title>Churches Of Norwich</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="site.css"> 
</head>

<body>
     <div id="bg"> 
        <div id="content">
            <div id="headboxspacer"></div>
            <div id="head-box">Churches of Norwich</div>
            <div id="navbar" style="float: none">
                <div id="tabs">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="map.html">Map</a></li>
                        <li><a href="churches.html">Churches</a></li>
                        <li><a href="comments.html">Comments</a></li>
                        <li><a href="gallery.html">Gallery</a></li>
                    </ul>
                </div>
            </div>
            <div id="container" style="overflow:hidden;width: 100%">
                <div id="homeboxleft" style="clear: both">Testing</div>
                <div id="homeboxright" style="clear: both" >Right</div>
            </div>
            <div id="footer"> footer </div>
            <div id="bottomspacer"></div>
        </div>
    </div>
</body>
</html>

CSS

#content {
width: 1200px ;
height: max-content;
margin-left: auto ;
margin-right: auto ;
}

#headboxspacer{
height:50px;
width:100%;
}

#head-box{
background-color: #003651;
height: 120px;
width: 100%;
padding: 10px;
margin: 5px;
text-orientation: inherit;
font-family: sans-serif;
font-size: 65pt;
color: #FEE7BE;
font-style: normal;
text-align: center;
}

#navbar{
height: 50px;
background-color: #003651;
width: 100%;
margin: 5px;
padding: 10px;

font-family: sans-serif;
font-size: 20pt;
color: #FEE7BE;
font-style: normal;
text-align: center;
text-decoration-line: underline;;
width: 100%;
} 

#tabs ul {
margin: 0 ;
padding: 0 ;
list-style: none ;
display: inline ;
}

#tabs ul li {
margin: 0 ;
padding: 10px ;
display: inline ;
text-align: center ;
list-style: none ;
font-family: Arial, Helvetica, sans-serif ;
}

#tabs li a {
color: #FEE7BE;
background-color: #003651 ;
padding: 8px ;
text-decoration: none ;
display: inline ;
} 

#tabs li a:hover {
color: gainsboro ;
background-color: #003651 ;
}

#container{
width: 1200px;
}

#homeboxleft{
background-color: #FEE7BE;
height: 500px;
width: 50%;

float: right;

margin: 0px;
opacity: 10%;
filter:alpha(opacity=10);

text-orientation: inherit;
font-family: sans-serif;
font-size: 10pt;
color: #003651;
font-style: normal;
text-align: center;
}

#homeboxright{
background-color: #FEE7BE;
height: 500px;
width: 50%;
float: left;    
margin: 5px;
text-orientation: inherit;
font-family: sans-serif;
font-size: 10pt;
color: #003651;
font-style: normal;
text-align: center;
}

#mainbox{

background-color: #FEE7BE;
height: 500px;
width: 100%;
opacity: 0.6; 
}

#footer{
background-color: #003651;
height: 120px;
width: 100%;
padding: 10px;
margin: 5px;
text-orientation: inherit;
font-family: sans-serif;
font-size: 65pt;
color: #FEE7BE;
font-style: normal;
text-align: center;
clear: both;
}

#bottomspacer{
height:100px;
width:100%;
}

最佳答案

因为导航栏的padding是添加到导航栏的宽度上的。

你必须使用带有内部 div 的盒子模型解决方案 http://css-discuss.incutio.com/wiki/Box_Model_Hack#Box-in-a-box

那么你在所有浏览器中都有相同的宽度和外观

关于css - 为什么我的 Div 标签被推到左边几个像素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13787770/

25

4

0

文章推荐： c - 在不退出 C 函数的情况下从函数返回一个值

文章推荐： android - 无法理解linux命令的输出

文章推荐： c - Linux 中的 DMA 如何处理 memcpy

文章推荐： linux - clone() 系统调用无法正常工作

Mercurial 推/拉详细输出
当我推/拉存储库时，是否可以详细输出到底发生了什么？目前，我有一个大型存储库，正在将其推送到服务器，大约 15 分钟后。或者这样，它给了我一个错误，但没有告诉我它在这 15 分钟内做了什么。最佳答案
html - 推/拉多行列
我不知道我的方法是否有意义，但是，我需要实现如下图的布局: 现在，我只写一个并用其中的一列表示每个区域，例如 . 没有黄色区域，这工作正常: green red blue
css - 推/拉类在网格系统中做什么？
当我查看许多 CSS 网格系统和框架时，它们通常具有标准的列和行设置以及百分比宽度。例如这样的事情: 标准网格列: .col-10 { width: 83.33333%; width: cal
git子模块提交/推/pull
我想使用 git 子模块。我需要采取的步骤将我的更改推送到我的项目是 add/commit/push from submodule directory add/commit/push from pa
站长平台对百度流量与关键词工具进行重大升级：推“关键词影响力”
以下为百度站长平台的公告全文：结合站长对于关键词数据分析的需求，站长平台对流量与关键词工具进行了升级，推出(“关键词影响力”）这一全新概念。关键词影响力算法复杂，涵盖该关键词下百度搜索可以为
wxwidgets - (推+下拉)按钮wxWidgets
我需要一个具有普通按钮和下拉按钮的控件。例如类似的控件在 wxRibbonButtonBar 中可用，我无法在简单的 wxPanel 中使用它。最佳答案我实现了 SplitButton，它看起
svn - 如何将集市分支导出到新的颠覆存储库，然后从中拉/推
我一直在做一个项目，使用 Bazaar 作为版本控制系统。现在我必须和离岸人员一起工作，而他们只想使用 SVN。我有什么: 我的 bazaar 分支及其文件和修订版。一个全新的 subversio
data-structures - 推/拉数据流模型的优缺点是什么？
我一直在开发数据流/图表风格的内部 DSP 应用程序(Java 带有 Groovy/Jython/JRuby 的钩子(Hook)，通过 OSGi 的插件，大量的 JNI)，类似于纯数据和 simuli
assembly - THUMB 推/弹出指令
我正在尝试使用 THUMB 指令创建一个阶乘方法，我基本上做到了。我只有一个关于 PUSH/POP 操作码的问题:如果我使用 push 将 r0 的值存储在堆栈中(所以 push {r0} )，我可
ZeroMQ/ZMQ 推/拉模式的实用性
在尝试 ZeroMQ Push/Pull (他们称之为 Pipeline)套接字类型时，我很难理解这个图案。它被称为“负载均衡器”。假设单个服务器将任务发送给多个工作人员，推/拉将在所有客户端之间平
callback - Firebase - 推()回调
有什么方法可以使用 push() 方法找出我的数据何时保存在数据库中？我写了下面的代码，但它多次保存数据...... db.ref('news').push(opts).then(() => {
authentication - github - 推/拉时要求用户名和密码
我有这个问题，每次推或拉时我都必须把它放进去。我认为这是新的。有什么想法吗？最佳答案您可能正在使用 https 网址。切换到 ssh 并确保您的 key 设置正确(如果您的密码短语为空)，则不必输
assembly - ASM - 推/弹出
为什么当您将一个值压入堆栈时，ESP 寄存器会减少(而不是增加)，而当您弹出一个值时，ESP 寄存器会增加(而不是减少)？在这一点上，这对我来说是违反直觉的。最佳答案那是因为堆栈是从上到下“增长”
callback - Firebase - 推()回调
有什么方法可以使用 push() 方法找出我的数据何时保存在数据库中？我写了下面的代码，但它多次保存数据...... db.ref('news').push(opts).then(() => {
push - ZeroMQ 推/拉模式
我决定编写一个测试代码来查看 pusher - many pullers bundle 是如何工作的，我的怀疑成真了。拉取器按照连接的顺序接收消息，例如第一个消息由第一个连接的拉取器接收，第二个由第
javascript - 将新数字“推”入对象数组
我在 CSV 文件中存储了一长串日期。我已经成功地使用 d3.js 加载了这个数据集。现在我想向此数据集添加另一列，其中包含列表中每个日期的随机数。我相信此数据集已作为对象数组加载。所以我正在使用下
C++ vector 推/弹出
我一直在寻找解决方案。不使用 c++11。 for(int a = 1; a < team1.chan; a++) { team1.nums.push_back(ppb.back())
android - 如何在布局中滑动(推) subview ？
我打算在布局中构建带有滑动 subview 的 UI。 +--------------+ +--------------+ +--------------+ | view1
html - 推/拉 - 基础
Title 在小屏幕上，我首先需要标题，然后是文本字段，但在中等以上的屏幕上，我需要相反的方式 - 我已经尝试过推和拉，但它们无法工作 - 有什么想法吗？最佳答案根据 Swa
c++ - ZeroMQ 推/拉
zmq 的某些部分未以可预测的方式运行。我正在使用 VS2013 和 zmq 3.2.4。为了不在我的 pubsub 框架中“丢失”消息 [旁白:我认为这是一个设计缺陷。我应该能够首先启动我的订阅者

首页

博学

6Ren·AI

商城

css - 为什么我的 Div 标签被推到左边几个像素？