CSS基础测试8 #31

zhangxinxu · 2019-06-26T10:42:27Z

本期题目如下：

请附上对应的CSS代码，注意缩进和代码高亮，可以使用下面语法：

```css
你的代码在这里
```

请提供在线的可访问的demo地址（精力有限，没有demo减1分），如jsbin.com、jsfiddle.net或codepen.io，使用国内的类似工具也可以。

本次小测为上学期最后一期小测，直播答疑本周六6月29日上午10:00 。我还在思考该给前几名奖励什么礼品。

直播地址：https://live.bilibili.com/21193211

首位答题者会额外2积分，同时会被翻牌。

感谢您的参与！

wingmeng · 2019-06-26T10:55:26Z

> 在线 Demo <

<div class="btn-group">
  <button class="btn btn-danger">按钮</button>
</div>
<div class="btn-group">
  <button class="btn btn-danger">按钮</button>
  <button class="btn btn-danger">按钮</button>
</div>
<div class="btn-group">
  <button class="btn btn-danger">按钮</button>
  <button class="btn btn-danger">按钮</button>
  <button class="btn btn-danger">按钮</button>
</div>

/* 解法1：grid 方案 */
.btn-group {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.btn-group + .btn-group {margin-top: 15px;}
.btn {
  padding: 6px 0;
  text-align: center;
  color: #666;
  background: transparent;
  border: 1px solid;
  border-radius: 10em;
}
.btn-danger {color: #ef7077;}

/* 解法2：flex 方案 */
.btn-group {
  display: flex;
  margin-left: -.5rem;
  margin-right: -.5rem;
}
.btn-group + .btn-group {margin-top: 15px;}
.btn {
  flex: 1;
  padding: 6px 0;
  margin: 0 .5rem;
  text-align: center;
  color: #666;
  background: transparent;
  border: 1px solid;
  border-radius: 10em;
}
.btn-danger {color: #ef7077;}

ThoughtZer · 2019-06-26T11:01:32Z

       * {
            padding: 0;
            margin: 0;
        }
        .wrapper {
            height: 100px;
            padding: 25px 1rem;
            display: flex;
        }

        .wrapper > div {
            flex: 1;
            border-radius: 25px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid red;
            box-sizing: border-box;
            margin-right: 1rem;
        }

        .wrapper > div:last-child {
            margin-right: 0;
        }

    <div class="wrapper">
        <div>按钮</div>
        <div>按钮</div>
        <div>按钮</div>
        <div>按钮</div>
        <div>按钮</div>
        <div>按钮</div>
        <div>按钮</div>
        <div>按钮</div>
    </div>

<!-- zxx: 视觉还原和HTML代码这块略有不足 -->

demo

Tenwq · 2019-06-26T11:15:06Z

Demo

.btn-group{
	display: flex;
	padding: 1rem .5rem;
	justify-content: space-between;   /* zxx: 这个可以没有 */
}
.btn{
	flex: 1;
	height: 30px;
	border: 1px solid #ef7b82;
	color: #ef7b82;
	font-size: 14px;
	border-radius: 30px;
	background-color: transparent;
	box-shadow: 0 0 1px #ef7b82;
	padding: 0;
	margin: 0 .5rem;
}

<div class="btn-group">
	<button type="button" class="btn">按钮</button>
</div>
<div class="btn-group">
	<button type="button" class="btn">按钮</button>
	<button type="button" class="btn">按钮</button>
</div>
<div class="btn-group">
	<button type="button" class="btn">按钮</button>
	<button type="button" class="btn">按钮</button>
	<button type="button" class="btn">按钮</button>
</div>
<div class="btn-group">
	<button type="button" class="btn">按钮</button>
	<button type="button" class="btn">按钮</button>
	<button type="button" class="btn">按钮</button>
	<button type="button" class="btn">按钮</button>
</div>

bugaosunihhh · 2019-06-26T11:26:54Z

flex 方案

.wrapper{
  display:flex;
  flex-wrap: nowrap;
  padding: 0 1rem;
  margin-bottom: 4rem;
  .btn{
    flex:1;
    margin-right:1rem;
    box-sizing:border-box;
    border-radius: 1em;
    border: 1px solid currentColor;
    text-align:center;
    color: pink;
    line-height: 2em;
    &:last-child{
      margin-right:0
    }
  }
}

<div class="wrapper">
  <div class="btn">按钮</div>
</div>

<div class="wrapper">
  <div class="btn">按钮</div>
  <div class="btn">按钮</div>
</div>

<div class="wrapper">
  <div class="btn">按钮</div>
  <div class="btn">按钮</div>
  <div class="btn">按钮</div>
</div>

demo:https://codepen.io/anon/pen/YbOvQP?editors=1111

grid 方案

.wrapper{
  display:grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  padding: 0 1rem;
  margin-bottom: 4rem;
  .btn{
    box-sizing:border-box;
    border-radius: 1em;
    border: 1px solid currentColor;
    text-align:center;
    color: pink;
    line-height: 2em;
  }
}

<div class="wrapper">
  <div class="btn">按钮</div>
</div>

<div class="wrapper">
  <div class="btn">按钮</div>
  <div class="btn">按钮</div>
</div>

<div class="wrapper">
  <div class="btn">按钮</div>
  <div class="btn">按钮</div>
  <div class="btn">按钮</div>
</div>

demo:https://codepen.io/anon/pen/NZarOx

silverWolf818 · 2019-06-26T11:35:16Z

demo

.container {
    background: #f6f7f9;
}

.btn-group {
    display: flex;
    padding: 1rem;
}

[class|='ui-btn'] {
    flex: 1;
    margin-right: 1rem;
    background: transparent;
    border: 1px solid;
    padding: 1em;
    border-radius: 10em;
}

.btn-group > [class|='ui-btn']:last-child {
    margin-right: 0;
}

[class*='-red'] {
    color: #ef7077;
}

[class*='-blue'] {
    color: skyblue;
}

<div class="container">
    <div class="btn-group">
        <button class="ui-btn-red">按钮</button>
        <button class="ui-btn-red">按钮</button>
        <button class="ui-btn-blue">按钮</button>
        <button class="ui-btn-blue">按钮</button>
    </div>
</div>

Seasonley · 2019-06-26T12:03:30Z

demo

<div class="button-group">
  <a tabindex="0" role="button" class="button">按钮</a>
</div>
<div class="button-group">
  <a tabindex="0" role="button" class="button">按钮</a>
  <a tabindex="0" role="button" class="button">按钮</a>
</div>
<div class="button-group">
  <a tabindex="0" role="button" class="button">按钮</a>
  <a tabindex="0" role="button" class="button">按钮</a>
  <a tabindex="0" role="button" class="button">按钮</a>
</div>

.button-group{
  font-size:0;
  display:flex;
  padding:0 0.5rem;
}
.button{
  flex:auto;
  font-size:1rem;
  color:#ef7077;
  position: relative;
  height: 2em;
  line-height:2em;
  min-width:4em;
  text-align:center;
  margin:0.5rem;
} 
.button::after{
  content: ''; 
  position: absolute;
  top: 0; 
  left: 0;
  border: 2px solid #ef7077;
  box-sizing: border-box;
  border-radius:2em;
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  transform-origin: left top;
}

liyongleihf2006 · 2019-06-26T12:07:58Z

jsbin

.average-button-group {
  display: table;
  table-layout: fixed;
  text-align: center;
  width: 100%;
}

.average-button-wrap {
  display: table-cell;
}

.average-button {
  margin-left: .5rem;
  margin-right: .5rem;
}

.average-button-wrap:first-child .average-button {
  margin-left: 0;
}

.average-button-wrap:last-child .average-button {
  margin-right: 0;
}

.average-button {
  display: block;
  border: 1px solid currentColor;
  background: transparent;
  border-radius: 1rem;
  white-space: nowrap;
  color: #ef7077;
}

<div class="average-button-group">
  <div class="average-button-wrap">
    <a class="average-button" role="button">按钮</a>
  </div>
</div>
<div class="average-button-group">
  <div class="average-button-wrap">
    <a class="average-button" role="button">按钮</a>
  </div>
  <div class="average-button-wrap">
    <a class="average-button" role="button">按钮</a>
  </div>
</div>
<div class="average-button-group">
  <div class="average-button-wrap">
    <a class="average-button" role="button">按钮</a>
  </div>
  <div class="average-button-wrap">
    <a class="average-button" role="button">按钮</a>
  </div>
  <div class="average-button-wrap">
    <a class="average-button" role="button">按钮</a>
  </div>
</div>
<div class="average-button-group">
  <div class="average-button-wrap">
    <a class="average-button" role="button">按钮</a>
  </div>
  <div class="average-button-wrap">
    <a class="average-button" role="button">按钮</a>
  </div>
  <div class="average-button-wrap">
    <a class="average-button" role="button">按钮</a>
  </div>
  <div class="average-button-wrap">
    <a class="average-button" role="button">按钮</a>
  </div>
</div>
<div class="average-button-group">
  <div class="average-button-wrap">
    <a class="average-button" role="button">按钮</a>
  </div>
  <div class="average-button-wrap">
    <a class="average-button" role="button">按钮</a>
  </div>
  <div class="average-button-wrap">
    <a class="average-button" role="button">按钮</a>
  </div>
  <div class="average-button-wrap">
    <a class="average-button" role="button">按钮</a>
  </div>
  <div class="average-button-wrap">
    <a class="average-button" role="button">按钮</a>
  </div>
</div>
<div class="average-button-group">
  <div class="average-button-wrap">
    <a class="average-button" role="button">按钮</a>
  </div>
  <div class="average-button-wrap">
    <a class="average-button" role="button">按钮</a>
  </div>
  <div class="average-button-wrap">
    <a class="average-button" role="button">按钮</a>
  </div>
  <div class="average-button-wrap">
    <a class="average-button" role="button">按钮</a>
  </div>
  <div class="average-button-wrap">
    <a class="average-button" role="button">按钮</a>
  </div>
  <div class="average-button-wrap">
    <a class="average-button" role="button">按钮</a>
  </div>
</div>
<div class="average-button-group">
  <div class="average-button-wrap">
    <a class="average-button" role="button">按</a>
  </div>
  <div class="average-button-wrap">
    <a class="average-button" role="button">按钮</a>
  </div>
  <div class="average-button-wrap">
    <a class="average-button" role="button">按钮按</a>
  </div>
  <div class="average-button-wrap">
    <a class="average-button" role="button">按钮按钮</a>
  </div>
</div>

brenner8023 · 2019-06-26T12:11:50Z

在线demo

.container {
    width: 50%;
    margin: 1rem auto;
    background: #ddd;
    display: flex;
    padding: 1rem 0.5rem;
}
.item {
  margin: 0 0.5rem;
  width: 100%;
  height: 2rem;
  outline: none;
  border: 1px solid red;
  border-radius: 1rem;
  color: red;
}

<div class="container">
    <button class="item">按钮</button>
</div>
<div class="container">
   <button class="item">按钮</button>
   <button class="item">按钮</button>
</div>
<div class="container">
   <button class="item">按钮</button>
   <button class="item">按钮</button>
   <button class="item">按钮</button>
</div>

sghweb · 2019-06-26T12:24:30Z

demo

<div class="btn">
  <button class="btn__item">按钮</button>
  <button class="btn__item">按钮</button>
  <button class="btn__item">按钮</button>
  <button class="btn__item">按钮</button>
  <button class="btn__item">按钮</button>
</div>

body{
  margin: 0;
}
.btn{
  display:flex;
  padding:10px;
  background: #f7f7f7;
}
.btn__item{
  display:flex;
  align-items: center;
  justify-content: center;
  /* zxx: 以上3个是不是可以不需要，可以看到比一开始参与小测的实现要好不少 */
  flex:1;
  padding: 6px 0;
  text-align: center;
  color: #ef7077;
  margin-right:1rem;
  background: transparent;
  border: 1px solid;
  border-radius: 10em;
}
.btn__item:last-child{
  margin-right: 0;
}

XboxYan · 2019-06-26T12:45:53Z

demo

.btn {
    padding: .5em 1em;
    text-align: center;
    background: none;
    border: 1px solid;
    font-size:1rem;
    border-radius: 5em;
    color: #ef7077;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.btn-group{
    display: flex;
    padding: .5rem;
}
.btn-group .btn{
    flex: 1;
    margin: 0 .5rem;
}

<div class="btn-group">
    <button class="btn">很多文字的按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
</div>

livetune · 2019-06-26T13:12:04Z

code pen

<div class="button-list">
        <button>按钮</button>
    </div>
    <div class="button-list">
        <button>按钮</button>
        <button>按钮</button>
    </div>
    <div class="button-list">
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
    </div>

.button-list {
    margin-top: 10px;
    display: flex;
}

.button-list button:first-child {
    margin-left: 1rem;
}

.button-list button {
    position: relative;   /* zxx: 这里relative作用是？ */
    /* 本来想用before伪类模拟按钮聚焦的，忘记删了 */
    flex: 1;
    font-size: 14px;
    color: #ef7077;
    background: inherit;
    border-radius: 9999px;
    border: 1px solid #ef7077;
    margin-right: 1rem;
}

.button-list button:focus {
    outline: none;
    box-shadow: 0px 0px 00px 1px skyblue;
}

z-xl-t · 2019-06-26T13:29:21Z

Demo

  <div class="container">
    <button class="btn">按钮</button>
  </div>
    <div class="container">
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
  </div>
    <div class="container">
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
  </div>
    <div class="container">
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
  </div>

body {
  margin: 0;
}
.container {
  display: flex;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  
  
  margin-top: 10px;
}
.btn {
  flex: 1;
  border: 1px solid red;
  outline: none;
  background: none;
  height: 26px;
  line-height: 26px;
  border-radius: 13px;
  margin: 0 0.5rem ;
  overflow: hidden;
}

guqianfeng · 2019-06-26T13:46:59Z

demo

    <div class="btn-group">
        <button>点击</button>
    </div>
    <div class="btn-group">
        <button>点击</button>
        <button>点击</button>
        <button>点击</button>
    </div>
    <div class="btn-group">
        <button>点击</button>
        <button>点击</button>
        <button>点击</button>
        <button>点击</button>
    </div>
    <div class="btn-group">
        <button>点击</button>
        <button>点击</button>
        <button>点击</button>
        <button>点击</button>
        <button>点击</button>
    </div>

        body{
            margin: 0;
        }
        .btn-group{
            display: flex;
            justify-content: space-between;
            margin: 10rem 0;
        }
        button{
            text-align: center;
            width: 100%;
            cursor: pointer;
            border-radius: 10rem;
            background-color: transparent;
            border: 1px solid #ccc;
            outline: none;
            margin: 0 0.5rem;
        }

//zxx: 按钮的ui还原差别大了点

NeilChen4698 · 2019-06-26T16:32:45Z

demo
https://codepen.io/crazyboy/pen/MMEraE

<div class="container1">
	<button>按钮</button>
	<button>按钮</button>
	<button>按钮</button>
	<button>按钮</button>
	<button>按钮</button>
	<button>按钮</button>
</div>
<div class="container2">
	<div><button>按钮</button></div>
	<div><button>按钮</button></div>
	<div><button>按钮</button></div>
	<div><button>按钮</button></div>
	<div><button>按钮</button></div>
	<div><button>按钮</button></div>
</div>

body {
	margin: 0;
}
button {
	text-align: center;
	border: 1px solid red;
	border-radius: 1rem;
	background: transparent;
}
/* 方法1 flex */
.container1 {
	display: flex;
	margin-left: 1rem;
}
.container1>button {
	flex-grow: 1;
	margin-right: 1rem;
}
/* 方法2 table */
.container2 {
	display: table;
	white-space: nowrap;
	width: calc(100% - 1rem);
	margin-left: 1rem;    /* zxx: 使用auto更佳 */
}
.container2>div {
	display: table-cell;
	padding-right: 1rem;
}
.container2>div>button {
	width: 100%;
}

//zxx: 视觉还原有待加强，选择器的选择随意了点

tzmy · 2019-06-27T01:46:11Z

在线DEMO

body,html{  /* zxx: html标签无需参与，padding多余 */
    margin: 0;
    padding: 0;
}

button{
    background: none;
    border: 1px solid #ef7077;
    color:#ef7077;
    height: 30px;
    flex: 1;
    margin: 0.5rem;
    border-radius: 20px;
}
.button_box{
    display: flex;
    margin: 0 0.5rem;
}

<div class="button_box">
    <button>按钮</button>
</div>
<div class="button_box">
    <button>按钮</button>
    <button>按钮</button>
</div>
<div class="button_box">
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
</div>

smileyby · 2019-06-27T02:35:15Z

在线预览DEMO

<div class="btn-group">
  <button class="btn">按钮</button>
</div>
<div class="btn-group">
  <button class="btn">按钮</button>
  <button class="btn">按钮</button>
</div>
<div class="btn-group">
  <button class="btn">按钮</button>
  <button class="btn">按钮</button>
  <button class="btn">按钮</button>
</div>
<div class="btn-group">
  <button class="btn">按钮</button>
  <button class="btn">按钮</button>
  <button class="btn">按钮</button>
  <button class="btn">按钮</button>
</div>

.btn-group {
  display: -webkit-flex;
  display: flex;
  padding: 1rem;
  margin-bottom: 1rem;
  background: #f6f7f9;
}

.btn {
  flex: 1;
  height: 30px;
  margin-right: 1rem;
  border: 2px solid #ef7077;  /* zxx: 截图发糊，实际宽度是1px */
  border-radius: 15px;
  color: #ef7077;
  background: transparent;
  box-sizing: border-box;
  outline: none;
}

.btn:focus {
  background: #fff;
}

.btn:last-child {
  margin-right: 0;
}

wang-baojin · 2019-06-27T05:46:25Z

demo

<div class="btn_container">
  <button class="btn_item">按钮</button>
  <button class="btn_item">按钮</button>  
  <button class="btn_item">按钮</button>
</div>

/* zxx: 下次请粘贴编译好的CSS */
.btn_container {
  display: flex;
  flex-wrap: nowrap;   /* zxx: 可以去掉 */
  .btn_item {
    + .btn_item {
      margin-left: 1rem;
    }
    &:focus {
      outline: none;
    }
    flex: 1;
    color: #ef7077;
    border: 1px solid;
    background: none;
    border-radius: 10rem;
  }
}

asyncguo · 2019-06-27T06:09:55Z

demo

<div class="button-group">
  <button class="button-item">按钮</button>
</div>
<div class="button-group">
  <button class="button-item">按钮</button>
  <button class="button-item">按钮</button>
</div>
<div class="button-group">
  <button class="button-item">按钮</button>
  <button class="button-item">按钮</button>
  <button class="button-item">按钮</button>
</div>

/* zxx: 下次请粘贴编译好的CSS */
.button-group{
  display: flex;
  margin: 0 1rem 1rem 1rem;
  .button-item{
    flex: 1;
    background-color: #fff;
    border: 1px solid #f56c6c;
    border-radius: 2em;
    color: #f56c6c;
    outline: none;
    padding: .5rem;
    &:not(:last-child) {
      margin-right: 1rem;
    }
  }
}

frankyeyq · 2019-06-27T07:01:26Z

demo

<div class="buttons-container">
    <button class="button">按钮</button>
</div>
<div class="buttons-container">
    <button class="button">按钮</button>
    <button class="button">按钮</button>
</div>
<div class="buttons-container">
    <button class="button">按钮</button>
    <button class="button">按钮</button>
    <button class="button">按钮</button>
</div>
<div class="buttons-container">
    <button class="button">按钮</button>
    <button class="button">按钮</button>
    <button class="button">按钮</button>
    <button class="button">按钮</button>
    <button class="button">按钮</button>
    <button class="button">按钮</button>
    <button class="button">按钮</button>
    <button class="button">按钮</button>
    <button class="button">按钮</button>
    <button class="button">按钮</button>
    <button class="button">按钮</button>
    <button class="button">按钮</button>
    <button class="button">按钮</button>
    <button class="button">按钮</button>
    <button class="button">按钮</button>
    <button class="button">按钮</button>
    <button class="button">按钮</button>
</div>

html {
    font-size: 16px;
    margin: 0;
}
body {
    margin: 0;
}
.buttons-container {
    display: flex;
    padding: 1rem;
}
.buttons-container .button:first-child {
    margin-left: 0
}
.buttons-container .button:last-child {
    margin-right: 0;
}
.button {
    flex: auto;
    height: 20px;
    line-height: 20px;
    box-sizing: border-box;
    border: 1px solid #f1949a;
    color: #f1949a;
    font-size: 12px;
    border-radius: 20px;
    text-align: center;
    margin: 0 0.5rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

//zxx: 按钮的视觉还原实在偏差太大

Jiarui-Zeng · 2019-06-27T07:22:14Z

demo

<div class="btn-group">
  <button class="cus-btn">按钮</button>
</div>

<div class="btn-group">
  <button class="cus-btn">按钮</button>
  <button class="cus-btn">按钮</button>
</div>

<div class="btn-group">
  <button class="cus-btn">按钮</button>
  <button class="cus-btn">按钮</button>
  <button class="cus-btn">按钮</button>
</div>

.btn-group {
  display: flex;
  flex-wrap: nowrap;
  padding: 0 0 1rem 1rem ;
}
.cus-btn {
  flex: 1;
  margin-right: 1rem;
  color: red;
  border: 1px solid red;
  border-radius: 1em;
  background: transparent;
  white-space: nowrap;
}

Forx-Js · 2019-06-27T09:54:49Z

> 点击这里 <

.main {
  background-color: #f5f5f5;
  padding: 16px;
}

.row {
  border: 1px solid black;           // 显示父子之间的宽度关系
  display: flex;
  flex-basis: row nowrap;
  justify-content: space-around;
}

.col {
  flex: 1 1;
}
.col + .col {
  margin-left: 1rem;     // 设置间隔
}

.btn {
  color: #dd0000;
  width: 100%;
  font-size: 16px;
  background: none;
  padding: 8px 3px;
  border-radius: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  outline: none;
  border: 1px solid currentcolor;
  transition: all 0.2s;
}
.btn:active {
  color: #dd0025;
  box-shadow: 0 0 8px -4px rgba(221, 0, 37, 0.7);
  background-color: rgba(221, 0, 37, 0.1);
}

xxf1996 · 2019-06-27T10:38:42Z

demo

<section class="container">
  <div class="container-row">
    <button class="btn">按钮</button>
  </div>
  <div class="container-row">
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
  </div>
  <div class="container-row">
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
  </div>
  <div class="container-row">
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
  </div>
</section>

.container {
  overflow: hidden;
  background-color: #f6f6f6;
}
.container-row {
  display: flex;
  flex-flow: row nowrap;   /* zxx: 多余 */
  justify-content: space-between;   /* zxx: 多余 */
  margin: 20px 1rem;
}
.btn {
  flex: 1;
  margin-right: 1rem;
  height: 28px;
  line-height: 28px;
  outline: 0;
  border-radius: 14px;
  border: 1px solid #f36;
  color: #f36;          /* zxx: 取色有误差 */
  background-color: transparent;
  overflow: hidden;
}
.btn:last-child {
  margin-right: 0;
}

后面想到也许grid布局更合适。

jsweber · 2019-06-27T16:27:13Z

demo

        body{
            margin: 0
        }
        .btn-wrapper{
            display: flex;
            flex-wrap: nowrap;
            background: #eee;
            padding: 10px 0;
        }
        .btn {
            outline: none;
            border: 1px solid #ef7b82;
            color: #ef7b82;
            padding: 6px 0;
            border-radius: 1em;
            background-color: #fff;
            flex-basis: 10em;
            flex: 1;
            margin: 0 0.5rem;
        }

        .btn:first-of-type{
            margin-left: 1rem;
        }

        .btn:last-of-type {
            margin-right: 1rem;
        }

xueyixiao · 2019-06-28T01:48:02Z

点击查看demo

        .btn {
		color: red;
		background: none;
		border: red 1px solid;
		border-radius: 50px;
		width: 100%;
		margin: 0 0.5rem;
		padding: 0.5rem;
		overflow: hidden;
	}
	.btn-group {
		padding: 0.5rem;
		display: flex;
	}

                <div class="btn-group">
			<button class="btn">按钮</button>
		</div>
		<div class="btn-group">
			<button `class="btn">按钮</button>`
			<button class="btn">按钮</button>
		</div>
		<div class="btn-group">
			<button class="btn">按钮</button>
			<button class="btn">按钮</button>
			<button class="btn">按钮</button>
			<button class="btn">按钮</button>
		</div>
		<div class="btn-group">
			<button class="btn">按钮</button>
			<button class="btn">按钮</button>
			<button class="btn">按钮</button>
			<button class="btn">按钮</button>
			<button class="btn">按钮</button>
		</div>

Despair-lj · 2019-06-28T06:02:24Z

demo

<div class="ui-container">
  <a href="javascript:" class="ui-button" role="button">按钮</a>
</div>
<div class="ui-container">
  <a href="javascript:" class="ui-button" role="button">按钮</a>
  <a href="javascript:" class="ui-button" role="button">按钮</a>
</div>
<div class="ui-container">
  <a href="javascript:" class="ui-button" role="button">按钮</a>
  <a href="javascript:" class="ui-button" role="button">按钮</a>
  <a href="javascript:" class="ui-button" role="button">按钮</a>
</div>

.ui-button {
  display: inline-block;
  margin: 0 0.5rem;
  padding: 9px 15px;
  line-height: 20px;
  font-size: 14px;
  text-align: center;
  color: #f4615c;
  border: 1px solid;
  border-radius: 20px;
  min-width: 50px;
  text-decoration: none;
  cursor: pointer;
}
.ui-button:hover {
  background-color: #aa4642;
  color: #fff;
}
.ui-container {
  display: flex;
  margin: 0.5rem;
}
.ui-container .ui-button {
  flex: 1;
}

lifelikejuly · 2019-06-28T12:08:21Z

demo

<div class="btn_wrapper">
  <button>按钮</button>
</div>

.btn_wrapper {
  margin: 10px;
  display: flex;
  border: 1px solid black;
  padding-left: 1rem;
}

button {
  border: 2px solid pink;
  padding: 5px 10px;
  margin-right: 1rem;
  border-radius: 20px;
  background: none;

  white-space: nowrap;
  flex: 1;
  
  color: pink;
  font-size: medium;
  text-overflow: ellipsis;
  overflow: hidden;
}

//zxx: 按钮取色误差较大

tao1874 · 2019-06-28T14:44:26Z

.box {
      padding: 0 1em;
      display: grid;
      grid-auto-flow: column;
      grid-gap: 1em;
    }
    .btn {
      border: 1px solid #ef777e;
      border-radius: 1em;
      text-align: center;
      line-height: 2em;
      color: #ee715c;
    }

DEMO

//zxx: 言简意赅666，可惜HTML代码没放出来，9分变8分

zhangxinxu · 2019-06-29T02:50:02Z

flex和grid布局都能实现我们想要的效果，但是推荐使用flex布局，因为语义更好。grid更适合页面大的框架结构布局，偏向二维。本题语义偏向一维。虽然grid控制间隙更方便（grid-gap）。
justify-content可以不需要，flex-wrap也是多余的，因为默认就是nowrap，flex-direction也是不需要的，因为默认就是row。因此，我们直接在容器元素设置display:flex就好了。
子项可以flex: 1，以及其他很多设置方法。例如flex: auto;（语义更合适-推荐）。设置flex:1实际上空间分配是不足的，于是，等分。因此设置flex:2, 3, 4...都是可以。还有就是width:100%，除了还有一种方法：width:-webkit-fill-available语义是更好的（推荐）。——两种推荐方法好像就一个人有使用（frankyeyq），这是更体现对CSS理解功力的细节。
下面是grid布局：grid-template-columns: repeat(auto-fit, minmax(0, 1fr))是一种方法，但是并不是最好的实现，因为这个比较难理解，也不好记忆。更好的实现是grid-auto-flow: column;
兼容性更好的table布局，IE8+都支持，放心使用。.table { display: table; table-layout: fixed; width: 100%; }.cell { display: table-cell;} 固定组合。务必掌握，基础必备布局知识。
不少人.container左右0.5rem，子项margin:0 .5rem实现1rem间隙，这样方式和实际开发是不符合的。实际开发左右1rem，是一个大的结构元素控制的。使用:last-child或者:first-child更符合实际开发，虽然代码更啰嗦了点，因为有一个重置。最好的实现其实还是使用:not()伪类（AsyncGuo的实现），:not(:last-child) {margin-right: 1rem;} 或者 .btn_item + .btn_item 或者 .btn_item ~ .btn_item（IE7+）
总共153名同学参与上本年小测：XboxYan全勤，共参与22次，参与次数最多。积分最高XboxYan。单项最高wingmeng。下面是优秀学员的奖励：积分第一名有500px创意书（定价98），后面3本书优先选择。第2名接下来选择，第3名没得选择。1~10名，送canvasapi.cn年费会员1年，Github登录下，微信或者微博私我你的github昵称即可。所有同学都可以这样联系我。
下周开始，全新一轮小测就开始了。下学期的奖品一定会更加丰富。

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSS基础测试8 #31

CSS基础测试8 #31

zhangxinxu commented Jun 26, 2019

wingmeng commented Jun 26, 2019 •

edited

Loading

ThoughtZer commented Jun 26, 2019 •

edited by zhangxinxu

Loading

Tenwq commented Jun 26, 2019 •

edited by zhangxinxu

Loading

bugaosunihhh commented Jun 26, 2019 •

edited

Loading

silverWolf818 commented Jun 26, 2019 •

edited

Loading

Seasonley commented Jun 26, 2019

liyongleihf2006 commented Jun 26, 2019

brenner8023 commented Jun 26, 2019 •

edited

Loading

sghweb commented Jun 26, 2019 •

edited by zhangxinxu

Loading

XboxYan commented Jun 26, 2019

livetune commented Jun 26, 2019 •

edited

Loading

z-xl-t commented Jun 26, 2019

guqianfeng commented Jun 26, 2019 •

edited by zhangxinxu

Loading

NeilChen4698 commented Jun 26, 2019 •

edited by zhangxinxu

Loading

tzmy commented Jun 27, 2019 •

edited by zhangxinxu

Loading

smileyby commented Jun 27, 2019 •

edited by zhangxinxu

Loading

wang-baojin commented Jun 27, 2019 •

edited by zhangxinxu

Loading

asyncguo commented Jun 27, 2019 •

edited by zhangxinxu

Loading

frankyeyq commented Jun 27, 2019 •

edited by zhangxinxu

Loading

Jiarui-Zeng commented Jun 27, 2019

Forx-Js commented Jun 27, 2019 •

edited

Loading

xxf1996 commented Jun 27, 2019 •

edited by zhangxinxu

Loading

jsweber commented Jun 27, 2019

xueyixiao commented Jun 28, 2019

Despair-lj commented Jun 28, 2019

lifelikejuly commented Jun 28, 2019 •

edited by zhangxinxu

Loading

tao1874 commented Jun 28, 2019 •

edited by zhangxinxu

Loading

zhangxinxu commented Jun 29, 2019

CSS基础测试8 #31

CSS基础测试8 #31

Comments

zhangxinxu commented Jun 26, 2019

wingmeng commented Jun 26, 2019 • edited Loading

ThoughtZer commented Jun 26, 2019 • edited by zhangxinxu Loading

Tenwq commented Jun 26, 2019 • edited by zhangxinxu Loading

bugaosunihhh commented Jun 26, 2019 • edited Loading

flex 方案

grid 方案

silverWolf818 commented Jun 26, 2019 • edited Loading

Seasonley commented Jun 26, 2019

liyongleihf2006 commented Jun 26, 2019

brenner8023 commented Jun 26, 2019 • edited Loading

sghweb commented Jun 26, 2019 • edited by zhangxinxu Loading

XboxYan commented Jun 26, 2019

livetune commented Jun 26, 2019 • edited Loading

z-xl-t commented Jun 26, 2019

Demo

guqianfeng commented Jun 26, 2019 • edited by zhangxinxu Loading

NeilChen4698 commented Jun 26, 2019 • edited by zhangxinxu Loading

tzmy commented Jun 27, 2019 • edited by zhangxinxu Loading

smileyby commented Jun 27, 2019 • edited by zhangxinxu Loading

wang-baojin commented Jun 27, 2019 • edited by zhangxinxu Loading

asyncguo commented Jun 27, 2019 • edited by zhangxinxu Loading

frankyeyq commented Jun 27, 2019 • edited by zhangxinxu Loading

Jiarui-Zeng commented Jun 27, 2019

Forx-Js commented Jun 27, 2019 • edited Loading

xxf1996 commented Jun 27, 2019 • edited by zhangxinxu Loading

jsweber commented Jun 27, 2019

xueyixiao commented Jun 28, 2019

点击查看demo

Despair-lj commented Jun 28, 2019

lifelikejuly commented Jun 28, 2019 • edited by zhangxinxu Loading

tao1874 commented Jun 28, 2019 • edited by zhangxinxu Loading

zhangxinxu commented Jun 29, 2019

wingmeng commented Jun 26, 2019 •

edited

Loading

ThoughtZer commented Jun 26, 2019 •

edited by zhangxinxu

Loading

Tenwq commented Jun 26, 2019 •

edited by zhangxinxu

Loading

bugaosunihhh commented Jun 26, 2019 •

edited

Loading

silverWolf818 commented Jun 26, 2019 •

edited

Loading

brenner8023 commented Jun 26, 2019 •

edited

Loading

sghweb commented Jun 26, 2019 •

edited by zhangxinxu

Loading

livetune commented Jun 26, 2019 •

edited

Loading

guqianfeng commented Jun 26, 2019 •

edited by zhangxinxu

Loading

NeilChen4698 commented Jun 26, 2019 •

edited by zhangxinxu

Loading

tzmy commented Jun 27, 2019 •

edited by zhangxinxu

Loading

smileyby commented Jun 27, 2019 •

edited by zhangxinxu

Loading

wang-baojin commented Jun 27, 2019 •

edited by zhangxinxu

Loading

asyncguo commented Jun 27, 2019 •

edited by zhangxinxu

Loading

frankyeyq commented Jun 27, 2019 •

edited by zhangxinxu

Loading

Forx-Js commented Jun 27, 2019 •

edited

Loading

xxf1996 commented Jun 27, 2019 •

edited by zhangxinxu

Loading

lifelikejuly commented Jun 28, 2019 •

edited by zhangxinxu

Loading

tao1874 commented Jun 28, 2019 •

edited by zhangxinxu

Loading