我有一个标题菜单，我正在尝试使用 CSS flex 使其响应。
Flex 功能工作正常，但由于某种原因，元素的高度总是很大。
我使用的代码如下(边框只是用来显示元素高度)。
标题高度<div>应该缩小以匹配 <p> 的大小元素。有人知道该怎么做吗？
#header {
background: #526272;
width: 100%;
max-width: 100vw;
height:auto;
position: fixed;
text-align: center;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-around;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
align-items: center;
color:white;
}
html {
margin: 0;
font-family: 'Raleway', sans-serif;
}
body {
margin: 0;
}
#title {
text-align: center;
padding: 1em;
vertical-align: middle;
font-family: 'Oswald', sans-serif;
font-size: 2em;
border-right: solid red;
width: auto;
height: auto;
}
p {
border-right: solid blue;
}
#menuBar {
height: 100%;
position: relative;
text-align: center;
display: block;
padding: 1em;
vertical-align: middle;
}
#social {
height: auto;
position: relative;
text-align: center;
display: block;
padding: 1em;
vertical-align: middle;
}<body>
<div id="header">
<div id="title"><p>EXAMPLE SITE NAME</p></div>
<div id="menuBar"><p>Menu</p>
</div>
<div id="social"><p>Socials</p></div>
</div>
</body>最佳答案
div.title 容器上有 padding: 1em。这在所有四个侧面创造了大量空间。
试试这个:
.title { padding: 0 1em; } /* padding only on the left and right */
此外，p 元素具有由浏览器设置的默认边距。进行此调整:
p { margin: 0; }
#header {
background: #526272;
width: 100%;
max-width: 100vw;
height: auto;
position: fixed;
text-align: center;
display: flex;
justify-content: space-around;
flex-flow: row wrap;
align-items: center;
color: white;
}
html {
margin: 0;
font-family: 'Raleway', sans-serif;
}
body {
margin: 0;
}
#title {
text-align: center;
padding: 0 1em; /* adjusted */
vertical-align: middle;
font-family: 'Oswald', sans-serif;
font-size: 2em;
border-right: solid red;
width: auto;
height: auto;
}
p {
margin: 0; /* new */
border-right: solid blue;
}
#menuBar {
height: 100%;
position: relative;
text-align: center;
display: block;
padding: 1em;
vertical-align: middle;
}
#social {
height: auto;
position: relative;
text-align: center;
display: block;
padding: 1em;
vertical-align: middle;
}<div id="header">
<div id="title">
<p>EXAMPLE SITE NAME</p>
</div>
<div id="menuBar">
<p>Menu</p>
</div>
<div id="social">
<p>Socials</p>
</div>
</div>关于html - 如何让div的高度尽量缩小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42233661/