我在导航栏方面遇到的最大问题之一是,无论何时尝试将 Logo 与标题放在一起,我总是发现图像会自动调整到比文本小得多的大小。
在下面的例子中,我在导航/标题栏的一端有一个标题,在另一端有一张图片。在调整大小时甚至在移动设备上,图像会变得非常小。
HTML...
<div id="nav">
<p>Crowes</p>
<img src="pic.jpg" />
</div>
..和 CSS
#nav {
background-color: #7E0E0A;
box-shadow: 1px 1px 1px 1px black;
padding: 1%;
font-size: 5vh;
color: white;
font-weight: bold;
font-family: 'Pacifico';
overflow: auto;
width: 100%;
z-index: 1;
}
#nav p {
margin-left: 2%;
margin-top: 1%;
margin-bottom: 1%;
float: left;
color: white;
}
#nav img {
display: inline-block;
width: 6%;
vertical-align: middle;
float: right;
border-radius: 50%;
border: 2px solid white;
margin-right: 3%;
opacity: 0.7;
transition: all 0.2s ease;
}
最佳答案
这不仅改变了元素的大小,还改变了它们的定位。这一切都必须更改为 ems
而不是 %
。
(特定于导航)
#nav {
background-color: #7E0E0A;
box-shadow: 1px 1px 1px 1px black;
font-size: 2.3em;
color: white;
font-weight: bold;
font-family: 'Pacifico';
overflow: auto;
width: 100%;
z-index: 1;
}
font-size
到 2.3em
。
(特定于 P)
#nav p {
margin: 1.3em;
display: inline-block;
vertical-align: middle;
float: left;
color: white;
}
margin
到 1.3em
(特定于 Img)
#nav img {
display: inline-block;
height: 2.3em;
vertical-align: middle;
float: right;
border-radius: 50%;
border: 2px solid white;
margin: 1em;
opacity: 0.7;
transition: all 0.2s ease;
}
height
到 2.3em
,由 @MrLister 指导,margin
到 1em
。
关于html - 导航中的元素单独调整大小而不是一起调整,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33156241/