CSS基础测试1

[zhangxinxu]

题目如下：

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

[yunxiaomxd]

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

[uustoboy]

* { 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; }

[pizijun]

dl {
  overflow: hidden;
}

dt {
  float: left;
  clear: both;
}

dd {
  float: right;
}

[natsumep]

    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;
    }

[Xujkstra]

dt {
  float: right;
}

[joeltaam]

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

[WWR1234567]

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

[Haloook]

	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;
	} 

[Haloook]

	*{
		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;
	} 

[masonzz]

1. 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;
}

2. 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;
}

3. 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;
}

[qza6268963]

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

[woyaohaohaoxuexi]

       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;
        }

[sissi1]

 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;
        }

[asyncguo]

*{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;
}

[Yannfy]

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

[huyeye3344]

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布局。

[XboxYan]

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

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;
}

[XXig]

* {
        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;
      }

[whrice]

*{
​        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;
​       }

[CJ921008]

        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;
        }

[white500]

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;
}

[lilinjuna]

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

[morecho]

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;
}

[lifelikejuly]

       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;
        }

[maczyt]

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

[GCGligoudan]

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

[daniyyer]

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

[lanqibazao]

  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;}

[sghweb]

 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;
    }

[tiantianliu]

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%;
	}