CSS基础测试1

Question

CSS基础测试1

Opened this issue 6 years ago · 62 comments

题目如下：

回答直接评论方式直接提交源码，我会统一整理，在周六进行点评和答疑。

Answer 1 · 2019-01-09T10:53:42.000Z

dl {
      display: flex;
      flex-wrap: wrap;
}
dt, dd {
      width: 50%;
      overflow: hidden;
      margin: 0;
}

Answer 2 · 2019-01-09T11:00:45.000Z

* { padding: 0; margin: 0; }
dl { border: 1px solid #999; padding: 10px; font-size: 14px; line-height: 20px; color: #999; width: 500px; overflow: hidden; }
dl dt { float: left; width: 50%; }
dl dd { float: right; width: 50%; text-align: right; }

Answer 3 · 2019-01-09T11:02:50.000Z

dl {
  overflow: hidden;
}

dt {
  float: left;
  clear: both;
}

dd {
  float: right;
}

Answer 4 · 2019-01-09T11:06:32.000Z

    dl{
        width:400px;
        border:1px solid #eee;
    }
    dl::after{
        content: ""; 
        display: block;
        clear: both;
        visibility: hidden; 
    }
    dl dd{
        margin-left:0;
    }
    dl dt,dl dd{
        width:50%;
        padding:5px 10px;
        box-sizing: border-box;
    }
    dl dt{
        float:left;
    }
    dl dd{
        float:right;
        text-align: right;
    }

Answer 5 · 2019-01-09T11:06:33.000Z

dt {
  float: right;
}

Answer 6 · 2019-01-09T11:18:52.000Z

dl{
  width: 400px;
  border: 1px solid;
  display: flex;
  flex-wrap: wrap;
  padding: 10px
}
dt,dd{
  width: 50%;
}
dd{
  margin: 0;
  text-align:right;
}

Answer 7 · 2019-01-09T11:19:58.000Z

dl {
    font-size: 0;
  }
  dt, dd {
    display: inline-block;
    width: 50%;
    margin-inline-start: 0;
    font-size: 12px;
  }
  dd {
    text-align: right;
  }

Answer 8 · 2019-01-09T11:33:39.000Z

	dl{
		width: 50%;
		border: 1px solid #eee;
		margin: 0 auto;
		padding: 20px 20px 0 20px;
		overflow: hidden;
		color: gray;
	}

	dt, dd{
		width: 50%;
		margin-bottom: 20px;
	}

	dt{
		float: left;
	}

	dd{
		float: right;
		text-align: right;
	}

Answer 9 · 2019-01-09T11:33:49.000Z

	*{
		margin: 0;
		padding: 0;
	}
	dl{
		width: 50%;
		border: 1px solid #eee;
		margin: 0 auto;
		padding: 20px 20px 0 20px;
		overflow: hidden;
		color: gray;
	}
	dt, dd{
		width: 50%;
		margin-bottom: 20px;
	}
	dt{
		float: left;
	}
	dd{
		float: right;
		text-align: right;
	}

Answer 10 · 2019-01-09T11:44:00.000Z

inline-block 实现，不过这种实现要设置 dl 的 font-size 为0，导致需要重新设置子元素的字体

dl {
    padding: 5px;
    border: 1px solid #999;
    font-size: 0;
}

dt, dd {
    display: inline-block;
    width: 50%;
    font-size: 12px;
}

dd {
    margin-inline-start: 0;
    text-align: right;
}

flex 实现，不用考虑 font-size 的问题了。

dl {
    padding: 5px;
    border: 1px solid #999;
    display: flex;
    flex-wrap: wrap;
}

dt, dd {
    flex: 0 0 50%;
}

dd {
    margin-inline-start: 0;
    text-align: right;
}

float 实现，在宽度不够情况没有上述两种实现效果好(虽然都不咋地

dl {
    padding: 5px;
    border: 1px solid #999;
}

dl:after {
    content: '';
    clear: both;
    display: block;
}

dt {
    float: left;
    clear: right;
}

dd {
    float: right;
    margin-inline-start: 0;
}

Answer 11 · 2019-01-09T11:46:10.000Z

div{
      text-align: right;
      width: 300px;
      padding: 10px;
      border:1px solid #ccc;
    }
    dt{
      float: left;
    }

Answer 12 · 2019-01-09T11:51:26.000Z

       dl {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding:  3%;
            border: 1px solid #d7d7d7;
        }
        dt {
            width: 50%;
        }
        dd {
            width: 50%;
            text-align: right;
            margin: 0;
        }

Answer 13 · 2019-01-09T11:56:27.000Z

 dl,dd{
            margin: 0px;
        }
        dl{
            width:50%;
            padding: 10px;
            border:2px solid #eae4e4;
            line-height: 30px;
        }
        dl:after{
                content: '';
                clear: both;
                display: block;
        }
        dt{
            float: left;
            clear: right;
        }
        dd{
            float: right;
        }

Answer 14 · 2019-01-09T11:57:13.000Z

*{margin: 0;padding: 0;}
dl{
  display:flex;
  flex-wrap:wrap;
  min-width: 300px;
  border:1px solid #eee;
}
dd,dt{
  width: 50%;
}
dd{
  text-align: right;
}

Answer 15 · 2019-01-09T12:12:13.000Z

        dt{
            display: inline-block;
            width: 50%;
        }
       dd{
            display: inline-block;
            width: 100px;
            text-align: right;
        }

Answer 16 · 2019-01-09T12:19:16.000Z

dl{
display: grid;
grid-template-columns:auto 1fr;
padding: 15px;
border: 1px solid #ddd;
line-height:30px;
}
dd{
text-align:right;
}

思路：
拿到题目想到的当然是inline-block / float / flex.
先看浮动，懒孩子不想清浮动，本能的拒绝了。
再看flex，display:flex + flex-wrap:wrap可以实现，
但是对50%的宽度产生质疑，我想使用flex:1，奈何dom被题目规定死了。
在UI里，前列往往是可控的，但后列一般是后端给的数据，我想尽可能大的把宽度给后列。50%/50%，40%/60%，30%/70%对我来说都没有意义，如果宽度定死了，何必flex。
inline-block也同样是宽度固定给否了。
掰掰手指头，我想到了grid布局。

Answer 17 · 2019-01-09T12:24:14.000Z

用浮动实现还算比较简洁吧

dl{
    margin: 0;
    padding: 5px 10px;
    overflow: hidden;
    border: 1px solid #ccc;
    line-height: 2em;
}
dt{
    float: left;
    clear: left;
}
dd{
    float: right;
    clear: right;
}

Answer 18 · 2019-01-09T12:37:19.000Z

* {
        margin: 0;
        padding: 0;
      }
      dl {
        color: #999;
        line-height: 2;
        padding: 10px;
        border: 1px solid;
      }
      dd{
        color: #333;
      }
      /* flex */
      .one {
        display: flex;
        flex-flow: row wrap;
      }
      .one>dt,
      .one>dd {
        width: 50%;
      }
      .one>dd {
        text-align: right;
      }
      /* 浮动 */
      .two>dt {
        float: left;
      }
      .two>dd {
        width: 100%;
        text-align: right;
      }
      /* inline-block */
      .three{
        font-size: 0;
      }
      .three>dt,.three>dd{
        width: 50%;
        display: inline-block;
        font-size: 12px;
      }
      .three>dd {
        text-align: right;
      }

Answer 19 · 2019-01-09T12:44:26.000Z

*{
        margin:0px;
        padding: 0px;
        }
       dl{
           border:1px solid black;
           width:560px;
           margin:20px auto;
           padding-left:35px;
           padding-top: 20px; 
       }
       dt{
           width:120px;
           height:25px;
       }
       dd{
           width:160px;
           height:25px;
           position:relative;
           top:-28px;
           left:360px;
           text-align: right;
       }

Answer 20 · 2019-01-09T14:27:46.000Z

        div,dl,dt,dd{
            margin: 0;
            padding: 0;
        }
        dl{
            border: 1px solid #000000;
            position: relative;
            
        }
        dt{
            position: relative;
        }
        dd{
            position: absolute;
            top: 0px;
            right: 0px;
        }
        dl>dd:nth-child(2){
            top: 0;
        }
        dl>dd:nth-child(4){
            top: 20;
        }
        dl>dd:nth-child(6){
            top: 40;
        }
        dl>dd:nth-child(8){
            top: 60;
        }

Answer 21 · 2019-01-09T14:33:10.000Z

dl{
	width: 400px;
	border: 1px solid #ccc;
	padding:8px;
	margin: 10px 0 10px 10px;
} 
dl>dt{
	float: left;
	color: #666;
}
dl>dd{
	color: #999;
	text-align: right;
	margin-bottom: 8px;
}

Answer 22 · 2019-01-09T14:37:33.000Z

       dl {
            border: 1px solid gray;
            overflow: hidden;
        }
        dl dt {
            float: left;
            padding: 10px;
        }
        dl dd {
            padding: 10px;
            text-align: right;
        }

Answer 23 · 2019-01-09T15:37:45.000Z

dl {
    border: 1px #ccc solid;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}

dl>dt,
dl>dd {
    width: 50%;
    margin: 10px 0 0 0;
}

dl>dd {
    text-align: right;
}

Answer 24 · 2019-01-09T16:29:50.000Z

       dl {
            width: 400px;
            height: 200px;
            border: 1px solid black;
            display: block;
            padding: 5px;
        }
        dt,
        dd {
            display: inline;
            margin: 0;
            padding: 0;
        }
        dt:not(:first-child):before {
            content: "\0A";
            white-space: pre;
        }
        dd {
            float: right;
        }

Answer 25 · 2019-01-10T01:36:59.000Z

dl {
  width: 300px;
  padding: 10px;
  border: 1px solid gray;
}
dt {
  float: left;
}
dd {
  text-align: right;
}

Answer 26 · 2019-01-10T01:43:41.000Z

dl {
      display: inline-block;
      padding: 15px;
      border: 1px solid #000;
      text-align: right;
    }
    dt {
      float: left;
    }
    dd {
      margin-left: 150px;
    }

Answer 27 · 2019-01-10T02:05:01.000Z

dt{
  float:left;
}
dd{
  text-align:right;
}
dd:after{
  display: table;
  content: " ";
  clear: both;
}

Answer 28 · 2019-01-10T02:26:36.000Z

  body{font-size:14px; margin:0; padding:0;}
  dl,dt,dd{ margin:0; padding:0;}
  dl{ line-height:28px; border:1px solid #CCC; padding:0 10px;}
  dl dt{ float:left;}
  dl dd{ text-align:right;}

Answer 29 · 2019-01-10T02:27:47.000Z

 dl{
      display:flex;
      flex-wrap: wrap;
      width:100%;
      min-width:320px;
      padding:0 15px;
      border:1px solid #999;
      box-sizing: border-box;
      color:#666;
    }
    dt{
      line-height:2.2;
      width:50%;
      margin: 0;
    }
    dd{
      width:50%;
      margin: 0;
      text-align: right;
    }

Answer 30 · 2019-01-10T02:58:04.000Z

dl,dd,dt{
		margin:0;
		padding:0;
	}
	dl{
		padding:10px;
		border:1px solid #ccc;
	}
	dl:before,dl:after{
		content:'';
		display:table;
	}
	dl:after{
		clear:both;
	}
	dt{
		float:left;
		text-align:left;
	}
	dd{
		float:right;
		text-align:right;
	}
	dt,dd{
		width:50%;
	}

Answer 31 · 2019-01-10T07:25:22.000Z

dl{
        padding: 10px;
        border: 1px solid #ccc;
        display: flex;
        flex-wrap: wrap;
      }
      dl>\*{
        flex: 0 0 50%;
        margin: 0;
      }
      dl>\*:nth-child(even){
        text-align: right;
      }

Answer 32 · 2019-01-10T07:30:53.000Z

dt { position: absolute; }
dd {text-align: right; }

Answer 33 · 2019-01-10T07:57:05.000Z

   dl {
     border:1px solid #ccc;
     padding:8px;
     max-width: 400px;
   }
   dt {
     display:inline-block;
     width:50%;
   }
   dd {
     display:inline;
     margin:0;
     float:right;
   }

Answer 34 · 2019-01-10T07:59:52.000Z

dl{
	border: 1px solid #eee;
	padding: 8px 12px;
	margin: 10px;
}
dt{
	float: left;
	margin-right: 20px;
	padding: 7px 0px;
}
dd{
	display: table-cell;
	width: 20000px;
//或者overflow:hidden也行
	text-align: right;
	word-break: break-all;
	padding: 7px 0;  //用padiding来撑开行之间的间距，不直接用line-height，假设dd字符过长变成几行，line-height会导致行高过稀，用margin的话，dt float垂直margin不会重叠，dd overflow的margin会重叠，不在一行上，而table-cell属性直接不支持margin
}

Answer 35 · 2019-01-10T08:02:57.000Z

dt { position: absolute; }
dd {text-align: right; }
or > dt { float: left； }

Answer 36 · 2019-01-10T08:32:15.000Z

*{margin:0;padding:0;}
dl{width: 40%;margin:10% auto;border: 1px solid #ddd;display: table;content: '';padding:1%;}
dd,dt{width:49%;}
dt{line-height: 30px;float: left;}
dd{float: right;text-align: right;line-height: 30px;}

Answer 37 · 2019-01-10T09:18:02.000Z

        dl,dt,dd{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            line-height: 40px;
            font-size: 14px;
        }
        dl{
            display: flex;
            display: -webkit-flex;
            flex-flow: row wrap;
            border:1px solid #ddd;
            
        }
        dl dt{
            width: 40%;
            padding: 0 10px;
        }
        dl dd{
            padding: 0 10px;
            width: 60%;
            text-align:right;
        }

Answer 38 · 2019-01-10T09:51:18.000Z

/*内容多时自动换行自适应页面*/
dl{
	overflow: hidden;
	padding:15px;
	border:1px solid #ddd;
}
dt{
	float: left;
}
dd{
	margin: 0 0 10px;
	padding-left: 5em;
	text-align: right;
}

Answer 39 · 2019-01-10T12:27:33.000Z

<style>
  dl {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    justify-content: space-between;
    border: 1px solid  #cccccc;
  }
  dt, dl {
    width: 50%;
    line-height: 35px;
  }
</style>

Answer 40 · 2019-01-10T14:01:35.000Z

       dl{
           width: 30%;
           margin:0 35%;
           overflow: hidden;
           border: 1px solid #ccc;
           padding: 20px;
           box-shadow: 1px 1px 2px 1px #ccc;
           color:#666;
       }
        dt{
            float: left;
            padding:5px;
            clear:both;
        }
        dd{
            float:right;
        }

Answer 41 · 2019-01-11T01:57:37.000Z

        dl {
            border: 1px solid grey;
            padding: 0.5em;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        dt {
            flex-basis: 50%;
        }

Answer 42 · 2019-01-11T02:09:40.000Z

    dl {
            border: 1px solid grey;
            padding: 0.5em;
            display: flex;
            flex-wrap: wrap;
            align-items: center
        }
        dt {
            flex-basis: 50%;
        }
        dd {
            text-align: right;
            flex-basis:50%;
            margin: 0;
        }

使用flex布局来处理dl里面元素
2.使用flex-basis来使dt/dd元素各占一行的50%，并消除dd的默认的margin影响
3.使用text-align来使dd中文字布局靠右

Answer 43 · 2019-01-11T15:08:00.000Z

给定的布局中，dt、dd都是块级元素、会分行，可以使用“二列布局”思路，分成两列，并且对右边使用text-align: right使其向右对齐。

dt {
  float: left;
}

dd {
  overflow: hidden;
  text-align: right;
}

Answer 44 · 2019-01-11T15:49:29.000Z

补充一个没有的：

dl {
  border: 1px solid #ccc;
  background-color: #fff;
  padding: 10px;
  line-height: 1.5;
}
dd {
  text-align: right;
  margin: -1.5em 0 0 5em;
}

Answer 45 · 2019-01-11T16:29:51.000Z

dl{
  border:1px solid gray;
  display: grid;
  grid-template-columns: repeat(2,minmax(200px, 1fr));
  min-width: 400px;
}
dt,dd{
  min-width: 200px;
  line-height: 1.5;
}
dd{
  text-align: right;
}

Answer 46 · 2019-01-12T03:49:01.000Z

今天直播的时候张老师在找一个flex版本的没找到, 我随意写了一个, 不知道这个效果是不是张老师想要的那个, 效果可以看这里 https://codepen.io/zhenhappy/pen/ebQRJB

dl {
  display: flex;
  flex-direction: column;
}
dt {
  width: 5em;
  line-height: 1.6em;
}
dd {
  /* margin: 0; */               /* 这里用了flex后, margin影响不到布局, 所以这里可以省略 */
  text-align: right;             /* 这里是为了保证文字溢出换行后右对齐 */
  align-self: flex-end;          /* 设置单个flex-item在交叉轴上的对齐位置 */
  max-width: calc(100% - 5em);   /* 设置最大宽度, 当文字溢出时候会自动换行 */
  line-height: 1.6em;            /* 手动指定一个行高 */
  transform: translateY(-1.6em); /* 让第一行元素向上偏移一个行高的高度, 这样就可以和dt元素顶部对齐 */
}
dd:empty::before {  /* 处理内容为空的情况 */
  content: '\00a0'; /* 设置一个空格, 让页面布局不会错乱 */
}

Answer 47 · 2019-01-15T01:12:34.000Z

dl{
display: flex;
flex-wrap: wrap;
border: 2px solid #aaa;
padding:10px;
}
dd{
margin:0;
width: calc(100% - 100px);
text-align:right;
margin:10px 0;
}
dt{
width:100px;
margin:10px 0;
}

Answer 48 · 2019-01-15T06:40:34.000Z

body,
dl,
dt,
dd {
    margin: 0
}

dl {
    line-height: 32px;
    width: 560px;
    text-indent: 16px;
    border: 1px solid #ccc;
}

dl>dd {
    margin-top: -32px;
    direction: rtl;
    color: #ccc;
}

Answer 49 · 2019-01-16T02:44:06.000Z

dl,dt,dd { margin: 0 }
dl {
width: 500px;
padding: 1rem;
line-height: 2;
color: #777;
border: 1px solid #777;
}
dl::after {
content: '';
display: block;
clear: both;
}
dt {
float: left;
width: 50%;
}
dd {
float: right;
}

Answer 50 · 2019-01-16T07:09:39.000Z

dl {
    max-width: 400px;
    padding: 5px 15px;
    line-height: 2;
    box-sizing: border-box;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 0 rgba(0,0,0,.15);
}

dt {display: inline;}

/* 灵感来自《CSS揭秘》P116 */
dd + dt::before {
    content: '\A';
    white-space: pre;
}

dd {
    float: right;
    margin: 0;
}

Answer 51 · 2019-01-17T09:10:53.000Z

dl{
width: 400px;
padding: 5px 10px;
border: 1px solid #c1c1c1;
overflow: hidden;
}
dt, dd {
width: 50%;
margin: 0;
padding: 5px 0;
float: left;
}
dd {
text-align: right;
}

Answer 52 · 2019-01-20T02:33:44.000Z

1. 笨方法：子元素宽度50%

dl {
    padding:10px;
    font-size: 0;
    line-height: 30px;
}
dt, dd {
   font-size: 14px;
   display: inline-block;
   width: 50%; 
}
dd {
   text-align:right;
   margin: 0;
}

2. float

dl {
   overflow: auto;
   line-height: 30px;
}
dt, dd {
   float: left;
   width: 50%;
}
dd {
   margin-left: 0;
   text-align: right;
}

3. flex

dl {
   display: flex;
   flex-wrap: wrap;
   line-height: 30px;
}
dt, dd {
   width: 50%; 
}
dd {
   text-align: right;
   margin-left: 0;
}

补充上面解答中认为更好的答案
4. 浮动，实现更巧妙

dt {
   text-align: right;
}
dt {
  flat: left;
}

5. grid

dl {
   display: grid;
   grid-template-columns: auto 1fr;
   line-height: 30px;
}  
dd {
   text-align: right;
}

Answer 53 · 2019-01-31T19:54:53.000Z

    //代码片段
    <style>
        html {
	    font-size: 16px;
	}
			
	body {
	    margin: 0;
	}
			
	.qiuzhi-box {
	    width: 300px;
	    margin: 1rem;
	    padding: 1rem;
				
	    border: 1px solid #CCCCCC;
	    box-sizing: border-box;
        }
			
	.qiuzhi-box::before,
	.qiuzhi-box::after {
	    content: '';
	    display: table;
	}
			
	.qiuzhi-box::after {
	    clear: both;
	}
			
	.qiuzhi-box dt,			
	.qiuzhi-box dd {
	    padding-bottom: .25rem;
	}
			
	.qiuzhi-box dt:last-child,			
	.qiuzhi-box dd:last-child {
	    padding-bottom: 0;
	}
			
	.qiuzhi-box dt {
	    float: left;
	    width: 25%;
	    text-align: left;
	}
			
	.qiuzhi-box dd {
	    float: right;
	    width: 75%;
	    margin: 0 auto;
	    text-align: right;
	}
    </style>

Answer 54 · 2019-02-19T03:34:56.000Z

    dl,dd{
        margin:0;
    }
    dl{
      width:500px;
      border :1px solid #e5e5e5;
      padding:0 20px;
    }
    dt{
        float:left;
        width:100px;
        margin-top:10px;
        color:#666;
    }
    dd{
        overflow: hidden;
        padding:10px 0;
        text-align: right;
    }

Answer 55 · 2019-02-19T03:51:16.000Z

因为dd是text-align：right；所以文字都是右对齐的，如果内容超过一行，也是右对齐的，有没有办法不超过一行的时候右对齐，超过一行的话就左对齐。

Answer 56 · 2019-03-06T07:18:51.000Z

    dl {
        font-size: 0;
        border: 1px solid #dedede;
        padding: 15px;
    }

    dd,
    dt {
        display: inline-block;
        width: 50%;
        margin: 0;
        font-size: 16px;
    }
    dt{
    	color: #b0b0b0;
    }

    dd {
        text-align: right;
    }

Answer 57 · 2019-07-25T01:54:31.000Z

dl{
    border: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
}
dt,dd{
    width: 50%;
    overflow: hidden;
    margin: 0;
}
dd{
    text-align: right;
}

Answer 58 · 2019-08-13T01:27:34.000Z

dt {
  float: left;
  clear: both;
}

dd {
  float: right;
}

Answer 59 · 2019-09-12T15:52:41.000Z

dl{
  padding:10px;
  border:1px solid #666;
  display:inline-block;
  line-height:35px;
}
dd{
  padding-left:100px;
  text-align:right;
}
dt{
  color:rgb(200,200,200);
  float:left;
}

Answer 60 · 2020-08-04T02:16:45.000Z

Demo

dl {
  border: 1px solid;
  padding: 10px;
}
dt,
dd {
  margin: 5px 0;
  width: 49%;
  display: inline-block;
}
dd {
  margin:0;
  text-align: right;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <dl>
    <dt>手机系统</dt>
    <dd>Android</dd>
    <dt>登录方式</dt>
    <dd>QQ 互联登录</dd>
    <dt>绑定时间</dt>
    <dd>2019-09-02 11:10</dd>
    <dt>绑定状态</dt>
    <dd>有效</dd>
  </dl>
</body>
</html>

Answer 61 · 2021-04-26T03:31:44.000Z

    dl{
      display: flex;
      flex-wrap: wrap;
    }
    dd{
      margin: 0;
      text-align: right;
      flex:70%;
    }
    dt{
      flex: 30%;
    }

Answer 62 · 2021-04-26T03:37:23.000Z

    dl{
      display: flex;
      flex-wrap: wrap;
    }
    dd{
      margin: 0;
      text-align: right;
      flex:70%;
    }
    dt{
      flex: 30%;
    }

good idea