Question

我正在使用MaterialiseCSS来设置我正在创建的网站的样式。

为了让我将导航栏项目放在导航栏的底部，我对这些项目应用了上边距（#normal-nav）。作为一种意想不到的副作用，导航栏下方的图片由于某种原因被剪裁。如果我删除了我应用于li的保证金，那么一切都很顺利。不知道我做错了什么。

Here is the issue replicated in JSFiddle。为了让你看到我遇到的问题，你需要让窗口变得相当大 - 我设置它以便这些项目只显示在桌面大小的显示器上。

Answer 1

这是因为你已经将＃normal-nav推到了它的父级以外。这是因为它是一个浮动元素，因此不会增加其容器的大小。

请参阅：An article about clearfix

<强>解决方案：

减少你给予的保证金最高
如果您打算保留浮动，请使用clearfix。
使用浮动以外的其他方法将该导航推向右侧，例如flexbox（可能是最具扩展性的选项）。

Answer 2

而不是利润率最高的尝试：

class ViewPagerAdapter extends FragmentPagerAdapter {

        public ViewPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            switch (position) {
                case 0:
                    return new Tab1Fragment();
                case 1:
                    return new Tab2Fragment();
                case 2:
                    return new Tab3Fragment();
            }
            return null;
        }

        @Override
        public int getCount() {
            return 3;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            switch (position) {
                case 0:
                    return "tab1";
                case 1:
                    return "tab2";
                case 2:
                    return "tab3";
            }
            return null;
        }

    }

顶部导航栏项目切断下面的图片

2 个答案: