在我的 html 页面中,我有 header
和 leftpane
作为 div
。 hedaer
的高度是116px
,leftpane
的宽度是181px
。当我使用 chrome-developer-tool
检查我的页面时,它显示高度和宽度分别为 98.36px
和 165.41px
而不是原来指定的在 CSS 中。
这是相关的CSS
.dashboard-header {
background: #000000;
height: 116px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
.dashboard-leftpane {
width: 181px;
background: #000000;
height: 100%;
}
对应的html代码
<div class="input-search">
<img class="imgage-search" src="search.svg" alt="Grace Logo">
<input type="text" name="" value="" placeholder="" style="border:none; background: #FAFAFA; flex-grow: 2;">
<img class="imgage-search" src="filter.svg" alt="">
</div>
<div class="profile-menu">
<span class="profile-menu-name">USER</span>
<img src="arrow_drop_down.svg" alt="">
</div>
<div class="dashboard-leftpane">
<div class="giraffe-list">
<div class="giraffe-list-item">
<span class="giraffe-item-name">ITEM1</span>
</div>
<div class="giraffe-list-item">
<span class="giraffe-item-name">ITEM2</span>
</div>
<div class="giraffe-list-item">
<span class="giraffe-item-name">ITEM3</span>
</div>
<div class="giraffe-list-item">
<span class="giraffe-item-name">ITEM4</span>
</div>
<div class="giraffe-list-item">
<span class="giraffe-item-name">ITEM5</span>
</div>
</div>
</div>
最佳答案
好吧,不知道这是否可行,但请确保您的 div 上有 box-sizing: border-box
。
如果这不能解决问题,可能是因为 display: flex;
有必要使用display: flex;
吗?
关于html - 浏览器呈现的宽度和高度与指定的 css 不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42558036/