我想要一个绿色背景填充100％屏幕宽度的导航栏，文本和徽标位于导航栏的中心。
这是我的html和css
*{
margin: 0;
padding: 0;
}
html {
width: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: normal;
background-color: #e9eaed;
margin: 0;
padding: 0;
}
nav {
width: 100%;
background-color: #93bf2e;
font-size: 14px;
font-weight: bold;
color: white;
margin: 0;
padding: 0;
}
#navMain {
width: 1096px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
padding: 0;
}
#navLeft {
width: 431px;
margin: 0;
padding: 15px 0 15px 40px;
display:inline-block;
}
#navRight {
width: 431px;
margin: 0;
padding: 15px 40px 15px 0;
text-align: right;
display:inline-block;
}
#navCenter {
width:146px;
margin: 0;
padding: 0;
display:inline-block;
vertical-align:middle;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../CSS/Homepage.css">
<title>Home</title>
</head>
<body>
<nav>
<div id="navMain">
<div id="navLeft">Home My Page</div>
<div id="navCenter"><img src="../GeneralImages/logo.png"></div>
<div id="navRight">Create Story Log Out</div>
</div>
</nav>
</body>
</html>
我使用Display:inline-block将3个DIV保持在同一行。中心div宽度为146.中心div包含146px宽度的图像。但问题是我将包含3个其他DIV的主DIV的宽度设置为1096.如果我将左侧（左侧填充40px）和右侧（右侧填充40px）设置为DIV宽度为435，则右侧Div被推到第二行。这很奇怪，因为数学是正确的（435 + 40 + 435 + 40 + 146）。但是如果我将左右DIV的宽度设置为431，它们就在同一条线上。这意味着以某种方式神秘地丢失了12个像素到div边界。请你帮忙删除这些边界。
答案 0 :(得分：0)
在div之间获得这些空格的原因是因为代码中的元素之间有空格（例如换行符和制表符或空格）。从标记中删除它们，div将正确排列：
<div id="navMain">
<div id="navLeft">Home My Page</div><div id="navCenter"><img src="../GeneralImages/logo.png"></div><div id="navRight">Create Story Log Out</div>
</div>
或者您可以使用HTML评论：
<div id="navMain">
<div id="navLeft">Home My Page</div><!--
--><div id="navCenter">
<img src="../GeneralImages/logo.png">
</div><!--
--><div id="navRight">Create Story Log Out</div>
</div>
看起来很难看，但是做到了。希望这会有所帮助，因为您知道布局看起来不像预期的原因。我虽然重写了整个结构，因为inline-block似乎不适合这里。
另请参阅this page以获取更多信息和替代解决方案。
答案 1 :(得分：0)
这是因为你正在使用display: inline-block元素，如果你用空格/新行/标签分隔元素，它会在每个元素之间创建一个空格，你需要做的就是通过没有用空格/新行/标签分隔元素，或给空格发表评论，或者设置负边距，你可以从这个site
以下是您的代码示例：DEMO
*{
margin: 0;
padding: 0;
}
html {
width: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: normal;
background-color: #e9eaed;
margin: 0;
padding: 0;
}
nav {
width: 100%;
background-color: #93bf2e;
font-size: 14px;
font-weight: bold;
color: white;
margin: 0;
padding: 0;
}
#navMain {
width: 1096px;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
padding: 0;
}
#navLeft {
width: 435px;
margin: 0;
padding: 15px 0 15px 40px;
display:inline-block;
}
#navRight {
width: 435px;
margin: 0;
padding: 15px 40px 15px 0;
text-align: right;
display:inline-block;
}
#navCenter {
width:146px;
margin: 0;
padding: 0;
display:inline-block;
vertical-align:middle;
}<nav>
<div id="navMain">
<div id="navLeft">Home My Page</div>
<div id="navCenter">
<img src="../GeneralImages/logo.png"/>
</div>
<div id="navRight">Create Story Log Out</div>
</div>
</nav>
<nav>
<div id="navMain"><div id="navLeft">Home My Page</div><div id="navCenter"><img src="../GeneralImages/logo.png"/></div><div id="navRight">Create Story Log Out</div></div>
</nav>
<nav>
<div id="navMain">
<div id="navLeft">Home My Page</div><!--
--><div id="navCenter"><!--
--><img src="../GeneralImages/logo.png"/><!--
--></div><!--
--><div id="navRight">Create Story Log Out</div><!--
--></div>
</nav>