您好,我正在研究我想要自定义的 shopify 主题。我把页脚复制到菜单和图片 slider 之间。我没有更改 css 和 html 中的任何内容(我只是重命名了影响页脚的 id 和类并重命名了它们)。但是 div 的边界和可能的 div 不对齐并且比其余内容宽一点。这是代码和演示:
<div id="footer1" >
<div id="big-footer1" class="row">
<div class="desktop-4 tablet-2 mobile-3 alpha">
<a href="/Shop/List/Gym_and_Fitness?cm_sp=homepage-_-fitnesst1-_-10-06-14" id="A_4"><img src="/mrporter/content/2014/home/100614/t1.jpg" alt="" id="IMG_5" /></a>
<h2 id="H2_6">
A SPORTING SUMMER:<br id="BR_7" />WHAT TO WEAR
</h2>
</div>
<div class="desktop-4 tablet-2 mobile-3">
<a href="/Shop/List/Gym_and_Fitness?cm_sp=homepage-_-fitnesst1-_-10-06-14" id="A_4"><img src="/mrporter/content/2014/home/100614/t1.jpg" alt="" id="IMG_5" /> </a>
<h2 id="H2_6">
A SPORTING SUMMER:<br id="BR_7" />WHAT TO WEAR
</h2>
</div>
<div id="" class="desktop-4 tablet-2 mobile-3 omega">
<a href="/Shop/List/Gym_and_Fitness?cm_sp=homepage-_-fitnesst1-_-10-06-14" id="A_4"><img src="/mrporter/content/2014/home/100614/t1.jpg" alt="" id="IMG_5" /></a>
<h2 id="H2_6">
A SPORTING SUMMER:<br id="BR_7" />WHAT TO WEAR
</h2>
</div>
</div>
这是CSS:
#big-footer1 {
border-left: 1px solid {{ settings.footer-top-border }};
border-right: 1px solid {{ settings.footer-top-border }};
margin-bottom: 0px;
margin-top: 0px;
border-bottom: 0px solid {{ settings.footer-bottom-border }};
list-style-type: none;
}
#big-footer1 .alpha { border-right: 1px solid {{ settings.dotted_color }}; }
#big-footer1 .omega { border-left: 1px solid {{ settings.dotted_color }}; }
@media screen and (max-width: 740px) {
#big-footer1 .alpha { border-right: 0px solid {{ settings.dotted_color }}; }
#big-footer1 .omega { border-left: 0px solid {{ settings.dotted_color }}; }
}
#big-footer1 { color: {{ settings.footer-text-color }}; }
#big-footer1 a { color: {{ settings.footer-text-color }}; }
#big-footer1 > div { padding: 0 20px; min-height: 120px;}
#big-footer1 ul {
list-style: none;
margin: 0;
line-height: 34px;
}
#big-footer1 ul li { display: inline-block; margin: 0 5px; }
#footer1 { background: {{ settings.footer-background }}; padding-bottom: 20px; text-align: center; }
最佳答案
代码的宽度设置为超过 100%,这就是它未正确对齐的原因。您要查找的代码行是:.gridlock .row .row 102.083%
,根据我的浏览器,它位于 stylesheet.css
的第 19 行.这会影响 <div id="big-footer1" class="row">
的宽度
关于html - Div 未与其他内容对齐但仍在包装器中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24292405/