微信扫一扫打赏支持

legend3---栅格系统偏移问题

legend3---栅格系统偏移问题

一、总结

一句话总结:

原因:因为激活类question_nav_active 多的两像素的边框使各个框的高度不一样了,所以造成元素偏移
解决方法:保持元素高度一样,或者放在不同的盒子里

 

 

二、栅格系统偏移问题

博客对应课程的视频位置:

 

 

1、现象

 
这是选中margin的效果,发现它们没对齐
 

 

 

 

2、原因

 

就是因为 凸出来了一点点

因为激活类question_nav_active 多的两像素的边框使各个框的高度不一样了,所以造成元素偏移

 

3、解决方法

 

保持高度一样即可

或者放在不同的盒子里

 

<ul class="question_circle_nav_list">
    <li data-my_part_id="1" data-has_data="1" class="my_part question_nav_active"><a class="question_nav_comment "><i class="fa fa-comments fa-fw" aria-hidden="true"></i></a><span>我的评论</span></li>
    <li data-my_part_id="2" data-has_data="0" class="my_part"><a class="question_nav_lesson "><i class="fa fa-building fa-fw" aria-hidden="true"></i></a><span>我的课程</span></li>
    <li data-my_part_id="3" data-has_data="0" class="my_part"><a class="question_nav_question_list "><i class="fa fa-cubes fa-fw" aria-hidden="true"></i></a><span>我的题库</span></li>
    <li data-my_part_id="4" data-has_data="0" class="my_part"><a class="question_nav_video "><i class="fa fa-video-camera fa-fw" aria-hidden="true"></i></a><span>我的视频</span></li>
</ul>
<ul class="question_circle_nav_list">
    @if(intval($user['part1_independent_question']))
        <li data-my_part_id="5" data-has_data="0" class="my_part"><a class="question_nav_video "><i class="fa fa-video-camera fa-fw" aria-hidden="true"></i></a><span>自主题库</span></li>
        <li data-my_part_id="5" data-has_data="0" class="my_part"><a class="question_nav_video "><i class="fa fa-video-camera fa-fw" aria-hidden="true"></i></a><span>我的收藏</span></li>
    @endif
</ul>

这里选择的方式是放在不同的盒子里面来解决

 

 

 

 

 

 

 
posted @ 2020-07-26 22:58  范仁义  阅读(156)  评论(0)    收藏  举报