HTML/CSS-4在800宽容器中200宽度的内联块元素不适合于单条线
HTML/CSS-4在800宽容器中200宽度的内联块元素不适合于单条线
提问于 2015-11-18 16:25:29
我正处于创建一个简单网站的早期阶段。我正在尝试做一个带有4个按钮的导航，这些按钮在一个800 an容器div中占25%的宽度。所有按钮都被设置为显示内联块，并且应该是200 is宽，但是第四个元素被推到一个新的行上。问题图片。
一开始我以为容器div的边框搞砸了，但我添加了框大小:边框；但它没有解决这个问题。然后，我从容器div上的一个边框更改为一个大纲，也没有运气。使用Chrome的“检查元素”工具，我可以看到每个按钮都是200‘s宽，但它们仍然不能放在一行上。这些部分的HTML和CSS如下：
HTML
<h1>Midwestern Accent</h1>
<div id="nav_div">
<div class="nav_button button_border">Home</div>
<div class="nav_button button_border">About</div>
<div class="nav_button button_border">Music</div>
<div class="nav_button">Contact</div>
</div>CSS
#content_div {
font-family: Arial, Helvetica, sans-serif;
margin: auto;
width: 800px;
background-color: black;
color: white;
/*border-width: 5px;
border-color: white;
border-style: solid;
box-sizing: border-box; */
outline: 5px solid white;
}
#nav_div {
border-style: solid;
border-color: white;
border-width: 0px 0px 5px 0px;
width: 100%;
vertical-align: top;
}
.nav_button {
text-align: center;
width: 25%;
display: inline-block;
font-size: 30px;
vertical-align: top;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2015-11-18 16:27:33
内嵌块元素，如内联后有自然间距。
关于CSS技巧的这是一篇好文章。，它解释了绕过它的不同方法。
就我个人而言，我使用的是-4px保证金-右修正。
.nav_button {
text-align: center;
width: 25%;
display: inline-block;
margin-right: -4px;
font-size: 30px;
vertical-align: top;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33785250
复制相关文章
相似问题
腾讯云开发者
