关于列表的一个小问题

灰太狼 2022-06-10 14:14 197阅读 0赞

直接Po代码

<style> #normal li{ border: 1px solid red; float: none; } #left li{ border: 1px solid green; float: left; } #right li{ border:1px solid blue; float: right; } #normal{ border: 1px solid red; } #left{ border: 1px solid green; } #right{ border:1px solid blue; } #frame{ border: 1px solid black; margin:30px; } </style>
    
    <div id="frame">
        <ul id="normal">
            <li>normal item1</li>
            <li>normal item2</li>
            <li>normal item3</li>
        </ul>
    </div>
    <ul id="left">
        <li>left item1</li>
        <li>left item2</li>
        <li>left item3</li>
    </ul>
    <ul id="right">
        <li>right item1</li>
        <li>right item2</li>
        <li>right item3s</li>
    </ul>

效果图如下：  
![效果图][SouthEast]  
  
id为left的ul添加样式float：left，即

#left{ border: 1px solid green; float:left; }

此时效果图如下：  
![效果图][SouthEast 1]  
  
我们会发现该ul下沉了一定的空间，而不是第三个ul上升了一定的空间。这是为什么呢？

> 这主要是因为如果该标签的float属性设置为left，本标签的margin-top的值和上一个标签（float属性为none）的margin-bottom的值进行了叠加。而如果该标签的float属性值为none是不会进行叠加的，因为这时margin值仅为上一个标签的margin-bottom的值。同理，如果float属性设置为right时，margin值也会是叠加的。  
> 因为ul标签的margin值是有默认值的，所以如果不能确定数值或者可能出现不可预知的样式布局，最好把ul标签的margin值设置为0

[SouthEast]: /images/20220610/b36b03f6821c4048b1e941d71880d30d.png
[SouthEast 1]: /images/20220610/74051da24c214da292ad3b01cef98205.png

发表评论取消回复

表情：

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

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

相关阅读

相关关于列表和字典的一些问题

l = [] a = { 'name':'lisa'} l.append(a) print(l,'\n','='20) ![在这里插入图片描述

妖狐艹你老母/ 2022年10月22日 11:58/ 0 赞/ 203 阅读

相关一个关于字符与字符串的小问题

\include<stdio.h> void main() \{ int i; char c\[5\]=\{'C','h','i','n','a'\};

╰半夏微凉°/ 2022年09月24日 00:22/ 0 赞/ 133 阅读

相关一个关于paintComponent的小细节问题

import java.awt.; import javax.swing.; public class TestPolyline extend

喜欢ヅ旅行/ 2022年08月27日 03:28/ 0 赞/ 201 阅读

相关【C语言】一个关于if的小问题

代码一： include<stdio.h> void main() { int a = 20; i

太过爱你忘了你带给我的痛/ 2022年06月17日 00:00/ 0 赞/ 184 阅读

相关关于列表的一个小问题

直接Po代码 <style> normal li{ border: 1px solid red; float: none; } left li{ border: 1p

灰太狼/ 2022年06月10日 14:14/ 0 赞/ 198 阅读

相关关于kafka连接的一个小问题

最近有一个项目中用到了java api连接kafka的代码，原来测试的时候：bootstrap.servers这个值一直写的是ip，然后生产和消费数据都没有问题，但在预发测试的

拼搏现实的明天。/ 2022年06月05日 08:42/ 0 赞/ 188 阅读

相关安卓setOnItemClickListener中关于Cursor的一个小问题

在之前拟定的业务需求中，涉及到获取调用listview中点击项数据的问题。先前的解决方法为：从头开始遍历获取，如果存在很多数据，会将每一条都处理一遍。 while

╰半夏微凉°/ 2022年05月15日 14:54/ 0 赞/ 202 阅读

相关关于kafka连接的一个小问题

最近有一个项目中用到了java api连接kafka的代码，原来测试的时候：bootstrap.servers这个值一直写的是ip，然后生产和消费数据都没有问题，但在预发测试的

╰+攻爆jí腚メ/ 2022年04月06日 11:42/ 0 赞/ 228 阅读

相关关于Integer的一个小面试题

看程序写结果：注意：Integer的数据直接赋值，如果在-128到127之间，会直接从缓冲池里进行获取数据代码如下： public class Integ

喜欢ヅ旅行/ 2022年02月09日 10:53/ 0 赞/ 165 阅读

相关关于查看dba_data_files的一个小问题

今天帮一个朋友看一个pl/sql的问题，他已经钻到一个死胡同里列，可能明眼人一看就知道哪里有问题，但是当局者迷，所以我抽空看了一下这个pl/sql块。 pl/sql的内容大

比眉伴天荒/ 2022年01月31日 07:25/ 0 赞/ 420 阅读