将合作伙伴徽标添加到我网站的页脚,与我的其他合作伙伴徽标位于同一行?
Adding a partner logo to the footer of my website on the same line as the rest of my partner logos?
我正在尝试将新的合作伙伴徽标添加到我网站的页脚,但它一直出现在下一行,我想知道你们是否可以帮助我将其与其他人放在同一行?
HTML(为了便于阅读,我删除了链接和 alt 标签):
<section class="bottom-logo">
<div class="row">
<div class="large-12 columns">
<ul class="footer-logos">
<li><img src="" alt="" /> </li>
<li><img src="" alt="" /></li>
<li><img src="" alt="" /> </li>
<li><img src="" alt="" /> </li>
<li><img src="" alt="" /> </li>
<li><img src="" alt="" /></li>
<li><img src="" alt="" /></li>
</ul>
</div>
</div>
</section>
CSS:
.bottom-logo{min-height: 150px;}
.bottom-logo img{
filter: grayscale(1);
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
-ms-filter: grayscale(1);
opacity: 0.5;
margin-top: 30%;
margin-left: auto;
}
.bottom-logo img:hover{
filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-o-filter: grayscale(0);
-ms-filter: grayscale(0);
opacity: 1;
}
.footer-logos li{
list-style: none;
display: inline-block;
margin: 2% 3.5%;
}
谢谢!
将CSS改成这个
.footer-logos li{
list-style: none;
display: inline-block;
margin: 2% 3.5%;
Width: 10%;
}
.footer-logos li img {
Width: 100%;
}
调整 li 上的宽度百分比以满足您的需要。
我正在尝试将新的合作伙伴徽标添加到我网站的页脚,但它一直出现在下一行,我想知道你们是否可以帮助我将其与其他人放在同一行?
HTML(为了便于阅读,我删除了链接和 alt 标签):
<section class="bottom-logo">
<div class="row">
<div class="large-12 columns">
<ul class="footer-logos">
<li><img src="" alt="" /> </li>
<li><img src="" alt="" /></li>
<li><img src="" alt="" /> </li>
<li><img src="" alt="" /> </li>
<li><img src="" alt="" /> </li>
<li><img src="" alt="" /></li>
<li><img src="" alt="" /></li>
</ul>
</div>
</div>
</section>
CSS:
.bottom-logo{min-height: 150px;}
.bottom-logo img{
filter: grayscale(1);
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
-ms-filter: grayscale(1);
opacity: 0.5;
margin-top: 30%;
margin-left: auto;
}
.bottom-logo img:hover{
filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-o-filter: grayscale(0);
-ms-filter: grayscale(0);
opacity: 1;
}
.footer-logos li{
list-style: none;
display: inline-block;
margin: 2% 3.5%;
}
谢谢!
将CSS改成这个
.footer-logos li{
list-style: none;
display: inline-block;
margin: 2% 3.5%;
Width: 10%;
}
.footer-logos li img {
Width: 100%;
}
调整 li 上的宽度百分比以满足您的需要。