今天要做 这种效果的图。我是用span做的 图文与图文按钮。因为行内元素没有width与height,(虽然可以用padding撑大),本人更喜欢用width与height。于是用了display:inline-block将span变为行内块级元素。之后两个span之间出现了一些间距。谷歌了一下找到了一些方法。https://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements这里提供了4种方法。我用了其中两种可行,记录一下,加强记忆吧。
1.对左边的span加margin-right:-4px(原博客中说是2个inline-block之间的间距是4px)。可行。
2.对2个span的父盒子加font-size:0;再对这两个span分别设置字号。可行。
再记录一下今天遇到的一个问题:
一个大盒子div-parent与屏幕同宽,两个子盒子:div-left与div-right,两个子盒子按比例分父亲的width,div-left左浮动,div-right右浮动。当浏览器页面缩小之后,div-right掉下去了。挣扎了许久,给div-parent设置了min-width之后,就可以缩放浏览器页面了。我也很奇怪,暂时还没有找到满意且理解的答案。后续更新。
时间: 2024-10-20 15:55:33