inline-block的上下排列对齐问题

迷南。 2021-11-01 06:08 283阅读 0赞

今天使用inline-block想在一个div里上下排列两个p元素，都是怎么排都不对。

如图：

![20190810180548184.png][]

具体的H5代码：

<div class="modify-rank-install">
        <ul>
            <li class="modify-rank-install-big"><div><p>KKKKKK</p>
                <p style="font-size: 1.2rem;line-height: 1.8rem">kkkkk</p></div></li>
            </ul>
    </div>

CSS代码：

.modify-rank-install{
        padding: 0 1rem;
        background: #ffffff;
        border-radius: 14px;
        margin-top: 1rem;
    }
    .modify-rank-install li{
        border-bottom: 1px solid #E0E0E0;
        height: 5.5rem;
        line-height: 5.5rem;
    }
    .modify-rank-install li.modify-rank-install-big{
        height: 7.6rem;
    }
    .modify-rank-install li.modify-rank-install-big div{
        display: inline-block;
        height: 7.6rem;
        line-height: 7.6rem;
        border-color: black;
        border-width: 1px;
        border-style: solid;
    }
    .modify-rank-install li.modify-rank-install-big div p{
        height: 3.8rem;
        line-height: 5.5rem;
        border-color: red;
        border-width: 1px;
        border-style: solid;
    }

后来看了大手的方法，其实很简单，在CSS里加一句

* {margin: 0;padding: 0;box-sizing:border-box;}

然后就可以了。

![20190810180851930.png][]

[20190810180548184.png]: /images/20211101/46e00f17e187436591c0a07e636618e9.png
[20190810180851930.png]: /images/20211101/66f4cbe23a8546bc96f6558017a9cd67.png

发表评论取消回复

表情：

评论列表（有 0 条评论，283人围观）

还没有评论，来说两句吧...

相关阅读

相关 Format中文对齐问题

Format中文对齐问题 1 问题描述使用format，有中文的时候，对不齐。 ![img][] 2 问题解析中文空格原因。 3 解决办法将

逃离我推掉我的手/ 2022年12月29日 00:20/ 0 赞/ 143 阅读

相关 C语言的内存对齐问题

许多实际的计算机系统对基本类型数据在内存中存放的位置有限制，它们会要求这些数据的首地址的值是某个数k(通常它为4或8)的倍数，这就是所谓的内存对齐，而这个k则被称为该数据类型的

谁践踏了优雅/ 2022年09月30日 06:19/ 0 赞/ 192 阅读

相关排列组合问题

1.排列问题：（1）递归解法：以abc为例 (1).第一个字符分别与后面的字符交换 (2).第二个字符分别与之后的字符交换，和(1)相同，进行递归。 includ

矫情吗；*/ 2022年08月04日 13:37/ 0 赞/ 187 阅读

相关特别的字节对齐问题

有如下一个结构体： struct X \{ uint32\_t a; char\ b\[0\]; \}; sizeof(

旧城等待，/ 2022年06月14日 01:38/ 0 赞/ 202 阅读

相关数据对齐问题

对齐跟数据在内存中的位置有关。如果一个变量的内存地址正好位于它长度的整数倍，他就被称做自然对齐。CASAPP上面有讲解。 [http://www.openedv.com/t

清疚/ 2022年06月09日 13:41/ 0 赞/ 158 阅读

相关 ios 关于UIBottom的image的上下左右方向排列

效果图： ![Center][] 主要代码：继承于UIBottom，主要修改titleEdgeInsets和imageEdgeInsets属性 Custo

女爷i/ 2022年06月05日 00:58/ 0 赞/ 141 阅读

相关关于字节对齐问题

今天在进行嵌入式移植某个算法时，移植之前，我按照惯例，先把程序在VS上修改成适合嵌入式linux的版本，我先在VS把linux中没有的头文件windows.h去掉以后，手动实现

淡淡的烟草味﹌/ 2022年03月16日 01:36/ 0 赞/ 286 阅读

相关结构体字节对齐的问题

最近在使用udp传输结构体的时候，发现了一个问题：结构体的实际大小和预想的并不一样，例子如下： struct msg { int index;

爱被打了一巴掌/ 2022年02月24日 02:10/ 0 赞/ 332 阅读

相关排列与组合问题

排列和组合问题是算法中比较常见的问题，在这一节里，我们将对常见的排列和组合问题进行探讨。（1）给定数字位数和进制，打印出所有的组合。对于这个问题，按照人的思维，就是对数

╰+攻爆jí腚メ/ 2021年11月15日 12:08/ 0 赞/ 323 阅读

相关 inline-block的上下排列对齐问题

今天使用inline-block想在一个div里上下排列两个p元素，都是怎么排都不对。如图： ![20190810180548184.png][] 具体的H5代码：

迷南。/ 2021年11月01日 06:08/ 0 赞/ 284 阅读