时间戳

首页 > 解决方案 > 当里面的元素很大时，div的填充变大

html - 当里面的元素很大时，div的填充变大

问题描述

我想在用于导航栏的 div 上放置一个图像，但是当我将图像大小调整为 50px 或更大时，div 上的填充也会变大。我不喜欢这个，因为图像要么太小而看不到，要么导航栏太大而看起来不好看，有什么解决方法的想法吗？

.navbar{
    background-color:green;
    padding:20px;   
}
.navbar #image1{
    width:40px;
    margin-left:950px;
    padding:0px;
}
<div class='navbar'>
    <a href='home.html'>Home</a>
    <a href='1.html'>Profile</a>
    <a href='2.html'>Transactions</a>
    <a href='3.html'><p>Settings</p></a>
    <img src='https://picsum.photos/200/300' id='image1'/>
</div>

标签： htmlcss

解决方案

您应该首先删除 margin-left:950px ，因为边距会将您的项目从您的navbar

然后将 flex 属性应用于您的导航栏 .navbar {display : flex} ，以便您的navbar项目位于同一行

我建议查看这个 flex-box 指南以及flexbox 属性

推荐阅读